@noahbaumgartner/svelte-ui 0.0.3 → 0.0.5

package/dist/components/tabs/Tabs.svelte

@@ -0,0 +1,280 @@
+<script lang="ts" module>
+	import type { LucideIcon } from '@lucide/svelte';
+
+	export type TabsOption<T extends string = string> = {
+		value: T;
+		label: string;
+		/** Any Lucide icon (import from `svelte-ui/icons`). */
+		icon?: LucideIcon;
+		/** Turns the tabs into navigation links; give it to every option. */
+		href?: string;
+		disabled?: boolean;
+	};
+</script>
+
+<script lang="ts" generics="T extends string">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	type Props = {
+		/** Value of the selected option. Bindable. */
+		value?: T;
+		/** The tabs. When every option has an `href` they render as links in a `<nav>` instead. */
+		options: TabsOption<T>[];
+		/** Accessible name for the tab list. */
+		label?: string;
+		size?: 'sm' | 'md';
+		class?: ClassValue;
+		/** Optional panel below the tabs; receives the selected value. Omit to render the content yourself. */
+		children?: Snippet<[value: T]>;
+		onchange?: (value: T) => void;
+	};
+
+	let {
+		value = $bindable(),
+		options,
+		label,
+		size = 'md',
+		class: className,
+		children,
+		onchange
+	}: Props = $props();
+
+	const id = $props.id();
+
+	let links = $derived(options.length > 0 && options.every((option) => option.href));
+	let selectedIndex = $derived(options.findIndex((option) => option.value === value));
+	/* The tab that Tab reaches: the selected one, or the first while nothing is selected */
+	let tabStop = $derived(
+		selectedIndex >= 0 ? selectedIndex : options.findIndex((option) => !option.disabled)
+	);
+
+	/* The tabs scroll sideways instead of wrapping; the edges fade out while there is more to scroll to */
+	let scroller: HTMLDivElement | undefined = $state();
+	let fade = $state({ start: false, end: false });
+
+	function updateFade() {
+		if (!scroller) return;
+		const { scrollLeft, scrollWidth, clientWidth } = scroller;
+		fade = { start: scrollLeft > 1, end: scrollLeft + clientWidth < scrollWidth - 1 };
+	}
+
+	$effect(() => {
+		if (!scroller) return;
+		updateFade();
+		const observer = new ResizeObserver(updateFade);
+		observer.observe(scroller);
+		if (scroller.firstElementChild) observer.observe(scroller.firstElementChild);
+		return () => observer.disconnect();
+	});
+
+	function select(option: TabsOption<T>) {
+		if (option.value === value) return;
+		value = option.value;
+		onchange?.(option.value);
+	}
+
+	/* Arrow keys move the focus and the selection along */
+	function handleKeydown(event: KeyboardEvent) {
+		const tabs = Array.from(
+			scroller?.querySelectorAll<HTMLElement>('[role="tab"]:not(:disabled)') ?? []
+		);
+		const index = tabs.indexOf(document.activeElement as HTMLElement);
+		const last = tabs.length - 1;
+		const target = {
+			ArrowRight: index === last ? 0 : index + 1,
+			ArrowLeft: index <= 0 ? last : index - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+
+		if (target === undefined) return;
+		event.preventDefault();
+		tabs[target]?.focus();
+		tabs[target]?.click();
+	}
+</script>
+
+<div class={['tabs', `tabs--${size}`, className]}>
+	<div
+		class={[
+			'tabs-scroller',
+			{ 'tabs-scroller--start': fade.start, 'tabs-scroller--end': fade.end }
+		]}
+		bind:this={scroller}
+		onscroll={updateFade}
+	>
+		{#if links}
+			<nav class="tabs-list" aria-label={label}>
+				{#each options as option (option.value)}
+					<!-- href comes from the consumer, who resolves it; this library has no routes -->
+					<!-- eslint-disable svelte/no-navigation-without-resolve -->
+					<a
+						href={option.href}
+						aria-current={option.value === value ? 'page' : undefined}
+						class={['tabs-tab', { 'tabs-tab--selected': option.value === value }]}
+					>
+						{#if option.icon}<option.icon class="tabs-icon" aria-hidden="true" />{/if}
+						{option.label}
+					</a>
+					<!-- eslint-enable svelte/no-navigation-without-resolve -->
+				{/each}
+			</nav>
+		{:else}
+			<!-- The tabs take the focus, not the list -->
+			<!-- svelte-ignore a11y_interactive_supports_focus -->
+			<div class="tabs-list" role="tablist" aria-label={label} onkeydown={handleKeydown}>
+				{#each options as option, i (option.value)}
+					<button
+						type="button"
+						role="tab"
+						id="{id}-tab-{i}"
+						aria-selected={i === selectedIndex}
+						aria-controls={children ? `${id}-panel` : undefined}
+						tabindex={i === tabStop ? 0 : -1}
+						disabled={option.disabled}
+						class={['tabs-tab', { 'tabs-tab--selected': i === selectedIndex }]}
+						onclick={() => select(option)}
+					>
+						{#if option.icon}<option.icon class="tabs-icon" aria-hidden="true" />{/if}
+						{option.label}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+	{#if children && !links && value !== undefined && selectedIndex >= 0}
+		<div
+			id="{id}-panel"
+			role="tabpanel"
+			aria-labelledby="{id}-tab-{selectedIndex}"
+			tabindex="0"
+			class="tabs-panel"
+		>
+			{@render children(value)}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tabs {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		min-width: 0;
+		max-width: 100%;
+	}
+
+	.tabs-scroller {
+		--fade-start: 0px;
+		--fade-end: 0px;
+		display: flex;
+		max-width: 100%;
+		overflow-x: auto;
+		scrollbar-width: none;
+		mask-image: linear-gradient(
+			to right,
+			transparent,
+			#000 var(--fade-start),
+			#000 calc(100% - var(--fade-end)),
+			transparent
+		);
+	}
+
+	.tabs-scroller::-webkit-scrollbar {
+		display: none;
+	}
+
+	.tabs-scroller--start {
+		--fade-start: 32px;
+	}
+
+	.tabs-scroller--end {
+		--fade-end: 32px;
+	}
+
+	.tabs-list {
+		display: inline-flex;
+		flex-shrink: 0;
+		gap: 2px;
+		padding: 3px;
+		background-color: var(--color-surface);
+		border-radius: 10px;
+	}
+
+	.tabs-tab {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		box-sizing: border-box;
+		height: 26px;
+		padding: 0 12px;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--color-text-muted);
+		text-decoration: none;
+		white-space: nowrap;
+		background-color: transparent;
+		border: none;
+		border-radius: 7px;
+		outline: none;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			background-color 200ms ease,
+			color 200ms ease;
+	}
+
+	.tabs-tab:hover:not(:disabled) {
+		color: var(--color-text);
+	}
+
+	/* Inside the tab, so the scroller does not clip it */
+	.tabs-tab:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+	}
+
+	.tabs-tab:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.tabs-tab--selected {
+		color: var(--color-text);
+		background-color: var(--color-bg);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+	}
+
+	.tabs-tab :global(.tabs-icon) {
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+	}
+
+	.tabs--sm .tabs-list {
+		border-radius: 8px;
+	}
+
+	.tabs--sm .tabs-tab {
+		height: 22px;
+		padding: 0 10px;
+		font-size: 12px;
+		border-radius: 5px;
+	}
+
+	.tabs-panel {
+		font-size: 13px;
+		color: var(--color-text);
+		border-radius: 6px;
+		outline: none;
+	}
+
+	.tabs-panel:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+</style>

package/dist/components/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { LucideIcon } from '@lucide/svelte';
+export type TabsOption<T extends string = string> = {
+    value: T;
+    label: string;
+    /** Any Lucide icon (import from `svelte-ui/icons`). */
+    icon?: LucideIcon;
+    /** Turns the tabs into navigation links; give it to every option. */
+    href?: string;
+    disabled?: boolean;
+};
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+declare function $$render<T extends string>(): {
+    props: {
+        /** Value of the selected option. Bindable. */
+        value?: T;
+        /** The tabs. When every option has an `href` they render as links in a `<nav>` instead. */
+        options: TabsOption<T>[];
+        /** Accessible name for the tab list. */
+        label?: string;
+        size?: "sm" | "md";
+        class?: ClassValue;
+        /** Optional panel below the tabs; receives the selected value. Omit to render the content yourself. */
+        children?: Snippet<[value: T]>;
+        onchange?: (value: T) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tabs: $$IsomorphicComponent;
+type Tabs<T extends string> = InstanceType<typeof Tabs<T>>;
+export default Tabs;

package/dist/index.d.ts

@@ -1,5 +1,8 @@
+export { default as Accordion } from './components/accordion/Accordion.svelte';
+export { default as AccordionItem } from './components/accordion/AccordionItem.svelte';
 export { default as AlertDialog } from './components/alert-dialog/AlertDialog.svelte';
 export { default as Avatar } from './components/avatar/Avatar.svelte';
+export { default as AvatarGroup } from './components/avatar-group/AvatarGroup.svelte';
 export { default as Badge } from './components/badge/Badge.svelte';
 export { default as Breadcrumb } from './components/breadcrumb/Breadcrumb.svelte';
 export { default as BreadcrumbEllipsis } from './components/breadcrumb/BreadcrumbEllipsis.svelte';
@@ -19,6 +22,9 @@ export { default as ColorPicker } from './components/color-picker/ColorPicker.sv
 export { default as ContextMenu } from './components/context-menu/ContextMenu.svelte';
 export { default as ContextMenuItem } from './components/context-menu/ContextMenuItem.svelte';
 export { default as Dialog } from './components/dialog/Dialog.svelte';
+export { default as Drawer } from './components/drawer/Drawer.svelte';
+export { default as EmptyState } from './components/empty-state/EmptyState.svelte';
+export { default as Entry } from './components/entry/Entry.svelte';
 export { default as Field } from './components/field/Field.svelte';
 export { default as FieldContent } from './components/field/FieldContent.svelte';
 export { default as FieldDescription } from './components/field/FieldDescription.svelte';
@@ -27,6 +33,8 @@ export { default as FieldGroup } from './components/field/FieldGroup.svelte';
 export { default as FieldLegend } from './components/field/FieldLegend.svelte';
 export { default as FieldSeparator } from './components/field/FieldSeparator.svelte';
 export { default as FieldSet } from './components/field/FieldSet.svelte';
+export { default as Footer } from './components/footer/Footer.svelte';
+export { default as FooterColumn } from './components/footer/FooterColumn.svelte';
 export { default as Input } from './components/input/Input.svelte';
 export { default as Kbd } from './components/kbd/Kbd.svelte';
 export { default as KbdGroup } from './components/kbd/KbdGroup.svelte';
@@ -34,13 +42,18 @@ export { default as InputGroup } from './components/input-group/InputGroup.svelt
 export { default as InputGroupAddon } from './components/input-group/InputGroupAddon.svelte';
 export { default as Label } from './components/label/Label.svelte';
 export { default as Link } from './components/link/Link.svelte';
+export { default as MeshGradient } from './components/mesh-gradient/MeshGradient.svelte';
 export { default as Navbar } from './components/navbar/Navbar.svelte';
 export { default as NavigationMenu } from './components/navigation-menu/NavigationMenu.svelte';
 export { default as NavigationMenuItem } from './components/navigation-menu/NavigationMenuItem.svelte';
 export { default as NavigationMenuLink } from './components/navigation-menu/NavigationMenuLink.svelte';
+export { default as NumberStepper } from './components/number-stepper/NumberStepper.svelte';
 export { default as Popover } from './components/popover/Popover.svelte';
+export { default as PreviewCard } from './components/preview-card/PreviewCard.svelte';
+export { default as Progress } from './components/progress/Progress.svelte';
 export { default as RadioGroup } from './components/radio-group/RadioGroup.svelte';
 export { default as RadioGroupItem } from './components/radio-group/RadioGroupItem.svelte';
+export { default as Select, type SelectOption } from './components/select/Select.svelte';
 export { default as Separator } from './components/separator/Separator.svelte';
 export { default as Sidebar } from './components/sidebar/Sidebar.svelte';
 export { default as SidebarContent } from './components/sidebar/SidebarContent.svelte';
@@ -58,6 +71,7 @@ export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
 export { default as Spinner } from './components/spinner/Spinner.svelte';
 export { default as Switch } from './components/switch/Switch.svelte';
 export { default as Table, type TableColumn, type TableSort, type TableSortValue } from './components/table/Table.svelte';
+export { default as Tabs, type TabsOption } from './components/tabs/Tabs.svelte';
 export { default as Textarea } from './components/textarea/Textarea.svelte';
 export { default as Toaster } from './components/toaster/Toaster.svelte';
 export { toast, type ToastOptions, type ToastAction } from './components/toaster/toast.svelte.js';
@@ -69,5 +83,6 @@ export type { PopoverTriggerProps } from './components/popover/Popover.svelte';
 export type { TooltipTriggerProps } from './components/tooltip/Tooltip.svelte';
 export type { InputType } from './components/input/Input.svelte';
 export type { DialogTriggerProps } from './components/dialog/Dialog.svelte';
+export type { DrawerTriggerProps } from './components/drawer/Drawer.svelte';
 export type { ContextMenuTriggerProps } from './components/context-menu/context.js';
 export { getSidebarContext, type SidebarContext } from './components/sidebar/context.js';

package/dist/index.js

@@ -1,5 +1,8 @@
+export { default as Accordion } from './components/accordion/Accordion.svelte';
+export { default as AccordionItem } from './components/accordion/AccordionItem.svelte';
 export { default as AlertDialog } from './components/alert-dialog/AlertDialog.svelte';
 export { default as Avatar } from './components/avatar/Avatar.svelte';
+export { default as AvatarGroup } from './components/avatar-group/AvatarGroup.svelte';
 export { default as Badge } from './components/badge/Badge.svelte';
 export { default as Breadcrumb } from './components/breadcrumb/Breadcrumb.svelte';
 export { default as BreadcrumbEllipsis } from './components/breadcrumb/BreadcrumbEllipsis.svelte';
@@ -19,6 +22,9 @@ export { default as ColorPicker } from './components/color-picker/ColorPicker.sv
 export { default as ContextMenu } from './components/context-menu/ContextMenu.svelte';
 export { default as ContextMenuItem } from './components/context-menu/ContextMenuItem.svelte';
 export { default as Dialog } from './components/dialog/Dialog.svelte';
+export { default as Drawer } from './components/drawer/Drawer.svelte';
+export { default as EmptyState } from './components/empty-state/EmptyState.svelte';
+export { default as Entry } from './components/entry/Entry.svelte';
 export { default as Field } from './components/field/Field.svelte';
 export { default as FieldContent } from './components/field/FieldContent.svelte';
 export { default as FieldDescription } from './components/field/FieldDescription.svelte';
@@ -27,6 +33,8 @@ export { default as FieldGroup } from './components/field/FieldGroup.svelte';
 export { default as FieldLegend } from './components/field/FieldLegend.svelte';
 export { default as FieldSeparator } from './components/field/FieldSeparator.svelte';
 export { default as FieldSet } from './components/field/FieldSet.svelte';
+export { default as Footer } from './components/footer/Footer.svelte';
+export { default as FooterColumn } from './components/footer/FooterColumn.svelte';
 export { default as Input } from './components/input/Input.svelte';
 export { default as Kbd } from './components/kbd/Kbd.svelte';
 export { default as KbdGroup } from './components/kbd/KbdGroup.svelte';
@@ -34,13 +42,18 @@ export { default as InputGroup } from './components/input-group/InputGroup.svelt
 export { default as InputGroupAddon } from './components/input-group/InputGroupAddon.svelte';
 export { default as Label } from './components/label/Label.svelte';
 export { default as Link } from './components/link/Link.svelte';
+export { default as MeshGradient } from './components/mesh-gradient/MeshGradient.svelte';
 export { default as Navbar } from './components/navbar/Navbar.svelte';
 export { default as NavigationMenu } from './components/navigation-menu/NavigationMenu.svelte';
 export { default as NavigationMenuItem } from './components/navigation-menu/NavigationMenuItem.svelte';
 export { default as NavigationMenuLink } from './components/navigation-menu/NavigationMenuLink.svelte';
+export { default as NumberStepper } from './components/number-stepper/NumberStepper.svelte';
 export { default as Popover } from './components/popover/Popover.svelte';
+export { default as PreviewCard } from './components/preview-card/PreviewCard.svelte';
+export { default as Progress } from './components/progress/Progress.svelte';
 export { default as RadioGroup } from './components/radio-group/RadioGroup.svelte';
 export { default as RadioGroupItem } from './components/radio-group/RadioGroupItem.svelte';
+export { default as Select } from './components/select/Select.svelte';
 export { default as Separator } from './components/separator/Separator.svelte';
 export { default as Sidebar } from './components/sidebar/Sidebar.svelte';
 export { default as SidebarContent } from './components/sidebar/SidebarContent.svelte';
@@ -57,6 +70,7 @@ export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
 export { default as Spinner } from './components/spinner/Spinner.svelte';
 export { default as Switch } from './components/switch/Switch.svelte';
 export { default as Table } from './components/table/Table.svelte';
+export { default as Tabs } from './components/tabs/Tabs.svelte';
 export { default as Textarea } from './components/textarea/Textarea.svelte';
 export { default as Toaster } from './components/toaster/Toaster.svelte';
 export { toast } from './components/toaster/toast.svelte.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@noahbaumgartner/svelte-ui",
-	"version": "0.0.3",
+	"version": "0.0.5",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/noahbaumgartner/svelte-ui.git"