compote-ui 0.66.0 → 0.67.1

package/dist/components/app-shell/app-shell-aside.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<aside
+	class={cn(
+		'col-start-3 row-start-2 flex w-72 flex-col overflow-hidden border-l border-border bg-surface-1',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</aside>

package/dist/components/app-shell/app-shell-aside.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AppShellAside: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type AppShellAside = ReturnType<typeof AppShellAside>;
+export default AppShellAside;

package/dist/components/app-shell/app-shell-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<footer
+	class={cn(
+		'col-span-full row-start-3 flex items-center border-t border-border bg-surface-1 px-4',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</footer>

package/dist/components/app-shell/app-shell-footer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AppShellFooter: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type AppShellFooter = ReturnType<typeof AppShellFooter>;
+export default AppShellFooter;

package/dist/components/app-shell/app-shell-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<header
+	class={cn(
+		'col-span-full row-start-1 flex items-center border-b border-border bg-surface-1 px-4',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</header>

package/dist/components/app-shell/app-shell-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AppShellHeader: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type AppShellHeader = ReturnType<typeof AppShellHeader>;
+export default AppShellHeader;

package/dist/components/app-shell/app-shell-main.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<main class={cn('col-start-2 row-start-2 min-w-0 overflow-y-auto p-6', className)} {...rest}>
+	{@render children?.()}
+</main>

package/dist/components/app-shell/app-shell-main.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AppShellMain: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type AppShellMain = ReturnType<typeof AppShellMain>;
+export default AppShellMain;

package/dist/components/app-shell/app-shell-navbar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<nav
+	class={cn(
+		'col-start-1 row-start-2 flex w-60 flex-col overflow-hidden border-r border-border bg-surface-1',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</nav>

package/dist/components/app-shell/app-shell-navbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AppShellNavbar: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type AppShellNavbar = ReturnType<typeof AppShellNavbar>;
+export default AppShellNavbar;

package/dist/components/app-shell/app-shell-section.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		grow?: boolean;
+	};
+
+	let { grow = false, class: className, children, ...rest }: Props = $props();
+</script>
+
+<div
+	class={cn(grow ? 'min-h-0 flex-1 overflow-x-hidden overflow-y-auto' : 'shrink-0', className)}
+	{...rest}
+>
+	{@render children?.()}
+</div>

package/dist/components/app-shell/app-shell-section.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    grow?: boolean;
+};
+declare const AppShellSection: import("svelte").Component<Props, {}, "">;
+type AppShellSection = ReturnType<typeof AppShellSection>;
+export default AppShellSection;

package/dist/components/app-shell/app-shell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	class={cn(
+		'relative grid h-dvh grid-cols-[auto_1fr_auto] grid-rows-[auto_1fr_auto] bg-surface-document text-ink',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</div>

package/dist/components/app-shell/app-shell.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AppShell: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/app-shell/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Root } from './app-shell.svelte';
+export { default as Header } from './app-shell-header.svelte';
+export { default as Navbar } from './app-shell-navbar.svelte';
+export { default as Main } from './app-shell-main.svelte';
+export { default as Aside } from './app-shell-aside.svelte';
+export { default as Footer } from './app-shell-footer.svelte';
+export { default as Section } from './app-shell-section.svelte';

package/dist/components/app-shell/index.js

@@ -0,0 +1,7 @@
+export { default as Root } from './app-shell.svelte';
+export { default as Header } from './app-shell-header.svelte';
+export { default as Navbar } from './app-shell-navbar.svelte';
+export { default as Main } from './app-shell-main.svelte';
+export { default as Aside } from './app-shell-aside.svelte';
+export { default as Footer } from './app-shell-footer.svelte';
+export { default as Section } from './app-shell-section.svelte';

package/dist/components/nav-rail/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './nav-rail.svelte';
+export { default as Item } from './nav-rail-item.svelte';

package/dist/components/nav-rail/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './nav-rail.svelte';
+export { default as Item } from './nav-rail-item.svelte';

package/dist/components/nav-rail/nav-rail-item.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { cn, type ClassValue } from 'tailwind-variants';
+
+	type Props = Omit<HTMLAnchorAttributes, 'class'> &
+		Omit<HTMLButtonAttributes, 'class'> & {
+			icon?: Snippet;
+			label: string;
+			active?: boolean;
+			class?: ClassValue;
+		};
+
+	let { icon, label, active = false, class: className, ...rest }: Props = $props();
+
+	const base = $derived(
+		cn(
+			'flex items-center gap-3 w-full rounded-md p-2 text-left text-ink-dim transition-colors',
+			'hover:bg-surface-2 hover:text-ink data-active:bg-surface-2 data-active:text-primary',
+			className
+		)
+	);
+
+	const iconBox = 'grid size-6 shrink-0 place-items-center [&>svg]:size-5';
+	const labelClass = cn(
+		'min-w-0 truncate whitespace-nowrap opacity-0 transition-opacity',
+		'group-hover:opacity-100 group-focus-within:opacity-100 group-data-expanded:opacity-100'
+	);
+</script>
+
+{#if rest.href}
+	<a
+		title={label}
+		aria-current={active ? 'page' : undefined}
+		data-active={active || undefined}
+		class={base}
+		{...rest}
+	>
+		<span class={iconBox}>{@render icon?.()}</span>
+		<span class={labelClass}>{label}</span>
+	</a>
+{:else}
+	<button
+		type="button"
+		title={label}
+		aria-current={active ? 'page' : undefined}
+		data-active={active || undefined}
+		class={base}
+		{...rest}
+	>
+		<span class={iconBox}>{@render icon?.()}</span>
+		<span class={labelClass}>{label}</span>
+	</button>
+{/if}

package/dist/components/nav-rail/nav-rail-item.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type ClassValue } from 'tailwind-variants';
+type Props = Omit<HTMLAnchorAttributes, 'class'> & Omit<HTMLButtonAttributes, 'class'> & {
+    icon?: Snippet;
+    label: string;
+    active?: boolean;
+    class?: ClassValue;
+};
+declare const NavRailItem: import("svelte").Component<Props, {}, "">;
+type NavRailItem = ReturnType<typeof NavRailItem>;
+export default NavRailItem;

package/dist/components/nav-rail/nav-rail.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	type Props = HTMLAttributes<HTMLElement> & {
+		expanded?: boolean;
+	};
+
+	let { expanded = $bindable(false), class: className, children, ...rest }: Props = $props();
+</script>
+
+<nav
+	data-expanded={expanded || undefined}
+	class={cn(
+		'group absolute inset-y-0 left-0 z-20 flex w-16 flex-col overflow-hidden',
+		'border-r border-border bg-surface-1 transition-[width] duration-200',
+		'hover:w-60 focus-within:w-60 data-expanded:w-60',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</nav>

package/dist/components/nav-rail/nav-rail.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLElement> & {
+    expanded?: boolean;
+};
+declare const NavRail: import("svelte").Component<Props, {}, "expanded">;
+type NavRail = ReturnType<typeof NavRail>;
+export default NavRail;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * as AppShell from './components/app-shell';
 export { default as Avatar } from './components/avatar/avatar.svelte';
 export type { AvatarProps, AvatarSize } from './components/avatar/avatar.types';
 export { default as Button } from './components/button/button.svelte';
@@ -65,6 +66,7 @@ export { default as Toggle } from './components/toggle/toggle.svelte';
 export type { ToggleProps, ToggleSize } from './components/toggle/types';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';
+export * as NavRail from './components/nav-rail';
 export * as Tooltip from './components/tooltip';
 export * as Field from './components/field';
 export * as Fieldset from './components/fieldset';

package/dist/index.js

@@ -1,4 +1,5 @@
 // Reexport your entry components here
+export * as AppShell from './components/app-shell';
 export { default as Avatar } from './components/avatar/avatar.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as LinkButton } from './components/button/link-button.svelte';
@@ -46,6 +47,7 @@ export { createToaster } from '@ark-ui/svelte/toast';
 export { default as Toggle } from './components/toggle/toggle.svelte';
 export * as ToggleGroup from './components/toggle-group';
 export * as Menu from './components/menu';
+export * as NavRail from './components/nav-rail';
 export * as Tooltip from './components/tooltip';
 export * as Field from './components/field';
 export * as Fieldset from './components/fieldset';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.66.0",
+	"version": "0.67.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",