noph-ui 0.16.20 → 0.16.22

package/dist/select/Select.svelte

@@ -526,6 +526,7 @@
 	}
 
 	.content select {
+		position: absolute;
 		width: 0;
 		height: 0;
 		visibility: hidden;

package/dist/tabs/Tab.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import Ripple from '../ripple/Ripple.svelte'
+	import { getContext } from 'svelte'
+	import type { TabProps } from './types.ts'
+
+	let {
+		children,
+		inlineIcon = false,
+		icon,
+		onclick,
+		onkeydown,
+		value,
+		variant = 'primary',
+		...attributes
+	}: TabProps = $props()
+	let activeTab: { value: string | number; node: HTMLElement } = getContext('activeTab')
+	let isActive = $derived(activeTab.value === value)
+
+	const setTabActive = (el: HTMLDivElement) => {
+		const oldTab = activeTab.node as HTMLElement | undefined
+		const oldIndicator = oldTab?.querySelector('.np-indicator') as HTMLElement
+		const oldIndicatorRect = oldIndicator?.getBoundingClientRect()
+		if (oldIndicatorRect) {
+			const newIndicator = el.querySelector('.np-indicator') as HTMLElement
+			newIndicator.style.setProperty(
+				'--np-tab-indicator-start',
+				`${oldIndicatorRect.x - newIndicator.getBoundingClientRect().x}px`,
+			)
+		}
+		activeTab.value = value
+		activeTab.node = el
+	}
+</script>
+
+<div
+	{@attach (el) => {
+		if (isActive) {
+			activeTab.node = el
+		}
+	}}
+	{...attributes}
+	tabindex={isActive ? 0 : -1}
+	role="tab"
+	class={[
+		'np-tab',
+		variant === 'secondary' && 'np-tab-secondary',
+		isActive && 'np-tab-content-active',
+		attributes.class,
+	]}
+	onclick={(event) => {
+		setTabActive(event.currentTarget)
+		if (onclick) {
+			onclick(event)
+		}
+	}}
+	onkeydown={(event) => {
+		if (event.key === 'Enter' || event.key === ' ') {
+			setTabActive(event.currentTarget)
+		}
+		if (onkeydown) {
+			onkeydown(event)
+		}
+	}}
+>
+	<div
+		class="np-tab-content"
+		style={variant === 'secondary' ? '--np-indicator-radius: 0;--_indicator-gap: 0' : ''}
+	>
+		<div
+			class={[
+				'np-tab-label',
+				!inlineIcon && variant === 'primary' && children && icon && 'np-tab-no-inline',
+			]}
+		>
+			{@render icon?.()}
+			{@render children?.()}
+			{#if variant === 'primary'}
+				<div class="np-indicator"></div>
+			{/if}
+		</div>
+		{#if variant === 'secondary'}
+			<div class="np-indicator"></div>
+		{/if}
+	</div>
+	<div class="focus-area"></div>
+	<Ripple />
+</div>
+
+<style>
+	.np-tab {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-family: inherit;
+		box-sizing: border-box;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		background-color: transparent;
+		border-width: 0;
+		position: relative;
+		cursor: pointer;
+		padding: 0 1rem;
+		color: var(--np-color-on-surface-variant);
+		height: 3rem;
+	}
+	.np-tab-content-active {
+		color: var(--np-color-primary);
+		--_focus-bottom: 4px;
+	}
+	.np-tab-content {
+		height: 100%;
+	}
+	.np-tab-label {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+		position: relative;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+		gap: 0.5rem;
+		text-wrap: nowrap;
+		min-width: 1.5rem;
+	}
+
+	.np-tab-no-inline {
+		flex-direction: column;
+		gap: 2px;
+		justify-content: center;
+	}
+	.np-tab:has(.np-tab-no-inline) {
+		height: 4rem;
+	}
+
+	.np-indicator {
+		position: absolute;
+		bottom: 0;
+		left: var(--_indicator-gap, 2px);
+		right: var(--_indicator-gap, 2px);
+		height: 3px;
+		background-color: var(--np-color-primary);
+		border-top-left-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+		border-top-right-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+		opacity: 0;
+	}
+	.np-tab-content-active .np-indicator {
+		opacity: 1;
+		animation: slide 0.3s ease-in-out;
+	}
+
+	@keyframes slide {
+		0% {
+			transform: translateX(var(--np-tab-indicator-start));
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+
+	.focus-area {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: var(--_focus-bottom, 0);
+		border-radius: var(--np-shape-corner-medium);
+		transition: height 0.3s ease;
+		pointer-events: none;
+	}
+	.np-tab:focus-visible {
+		outline: none;
+	}
+
+	.np-tab:focus-visible .focus-area {
+		outline-style: solid;
+		outline-color: var(--np-color-primary);
+		outline-width: 3px;
+		outline-offset: -3px;
+		animation: focusAnimation 0.3s ease forwards;
+	}
+	@keyframes focusAnimation {
+		0% {
+			outline-offset: -3px;
+			outline-width: 3px;
+		}
+		50% {
+			outline-offset: -6px;
+			outline-width: 6px;
+		}
+		100% {
+			outline-offset: -3px;
+			outline-width: 3px;
+		}
+	}
+</style>

package/dist/tabs/Tab.svelte.d.ts

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

package/dist/tabs/Tabs.svelte

@@ -1,5 +1,62 @@
 <script lang="ts">
-	const { children } = $props()
+	import Divider from '../divider/Divider.svelte'
+	import { setContext } from 'svelte'
+	import type { TabsProps } from './types.ts'
+
+	let {
+		children,
+		element = $bindable(),
+		value = $bindable(),
+		onkeydown,
+		...attributes
+	}: TabsProps = $props()
+	let active = $state({
+		value: value,
+		node: element?.firstChild as HTMLElement | undefined,
+	})
+	setContext('activeTab', active)
+
+	$effect(() => {
+		value = active.value
+	})
 </script>
 
-{@render children?.()}
+<div>
+	<div
+		{...attributes}
+		class={['np-tabs', attributes.class]}
+		role="tablist"
+		tabindex="-1"
+		bind:this={element}
+		onkeydown={(event) => {
+			if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+				const tabs: HTMLElement[] = Array.from(event.currentTarget.querySelectorAll('.np-tab'))
+				const focusedTab = event.currentTarget.querySelector('.np-tab:focus') as HTMLElement
+				const currentIndex = tabs.indexOf(focusedTab)
+				const index = currentIndex + (event.key === 'ArrowRight' ? 1 : -1)
+				const newTab =
+					index < 0 ? tabs[tabs.length - 1] : index >= tabs.length ? tabs[0] : tabs[index]
+				newTab.focus()
+			}
+			if (onkeydown) {
+				onkeydown(event)
+			}
+		}}
+	>
+		{@render children?.()}
+	</div>
+	<Divider />
+</div>
+
+<style>
+	.np-tabs {
+		display: flex;
+		align-items: end;
+		width: 100%;
+		height: 100%;
+		scrollbar-width: none;
+		scroll-behavior: smooth;
+		overflow: auto;
+		background-color: var(--np-color-surface);
+	}
+</style>

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

@@ -1,5 +1,4 @@
-declare const Tabs: import("svelte").Component<{
-    children: any;
-}, {}, "">;
+import type { TabsProps } from './types.ts';
+declare const Tabs: import("svelte").Component<TabsProps, {}, "element" | "value">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/tabs/index.d.ts

@@ -1,3 +1,2 @@
 export { default as Tabs } from './Tabs.svelte';
-export { default as PrimaryTab } from './PrimaryTab.svelte';
-export { default as SecondaryTab } from './SecondaryTab.svelte';
+export { default as Tab } from './Tab.svelte';

package/dist/tabs/index.js

@@ -1,3 +1,2 @@
 export { default as Tabs } from './Tabs.svelte';
-export { default as PrimaryTab } from './PrimaryTab.svelte';
-export { default as SecondaryTab } from './SecondaryTab.svelte';
+export { default as Tab } from './Tab.svelte';

package/dist/tabs/types.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface TabProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'primary' | 'secondary';
+    inlineIcon?: boolean;
+    value: string | number;
+    icon?: Snippet;
+}
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    value: string | number;
+    element?: HTMLElement;
+}

package/dist/tabs/types.js

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

package/dist/types.d.ts

@@ -15,3 +15,4 @@ export * from './select/types.js';
 export * from './snackbar/types.ts';
 export * from './text-field/types.ts';
 export * from './tooltip/types.ts';
+export * from './tabs/types.ts';

package/dist/types.js

@@ -15,3 +15,4 @@ export * from './select/types.js';
 export * from './snackbar/types.ts';
 export * from './text-field/types.ts';
 export * from './tooltip/types.ts';
+export * from './tabs/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.16.20",
+  "version": "0.16.22",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -50,7 +50,7 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.20.0"
+    "svelte": "^5.32.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
@@ -63,12 +63,12 @@
     "@types/eslint": "^9.6.1",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.8.2",
+    "eslint-plugin-svelte": "^3.9.0",
     "globals": "^16.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte": "^5.32.0",
+    "svelte": "^5.32.1",
     "svelte-check": "^4.2.1",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",

package/dist/tabs/PrimaryTab.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	const { children } = $props()
-</script>
-
-{@render children?.()}

package/dist/tabs/PrimaryTab.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const PrimaryTab: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type PrimaryTab = ReturnType<typeof PrimaryTab>;
-export default PrimaryTab;

package/dist/tabs/SecondaryTab.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	const { children } = $props()
-</script>
-
-{@render children?.()}

package/dist/tabs/SecondaryTab.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const SecondaryTab: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type SecondaryTab = ReturnType<typeof SecondaryTab>;
-export default SecondaryTab;