noph-ui 0.5.0 → 0.6.0

package/README.md

@@ -72,6 +72,7 @@ In progress (Breaking changes expected)
 - Chips
 - Dialogs (Fullscreen + Docs missing)
 - Menus (Positioning missing + Docs missing)
+- Navigation Rail (Badge is missing)
 - Tooltips (Positioning missing)
 
 Pending

package/dist/dialogs/index.d.ts

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

package/dist/dialogs/index.js

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

package/dist/index.d.ts

@@ -2,9 +2,11 @@ export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
+export * from './dialogs/index.js';
 export * from './divider/index.js';
 export * from './list/index.js';
 export * from './menu/index.js';
+export * from './navigation-rail/index.js';
 export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';

package/dist/index.js

@@ -2,9 +2,11 @@ export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
+export * from './dialogs/index.js';
 export * from './divider/index.js';
 export * from './list/index.js';
 export * from './menu/index.js';
+export * from './navigation-rail/index.js';
 export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';

package/dist/navigation-rail/NavigationAction.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { NavigationAction } from './types.ts'
+	import Ripple from '../ripple/Ripple.svelte'
+
+	let { selected, icon, label, ...attributes }: NavigationAction = $props()
+	let touchEl: HTMLSpanElement | undefined = $state()
+
+	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
+		return (obj as HTMLAnchorAttributes).href === undefined
+	}
+	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
+		return (obj as HTMLAnchorAttributes).href !== undefined
+	}
+</script>
+
+{#snippet content()}
+	<div class="np-navigation-action-icon">
+		<Ripple forElement={touchEl} />
+		{@render icon()}
+	</div>
+	<div class="np-navigation-action-label">{label}</div>
+	<span class="np-touch" bind:this={touchEl}></span>
+{/snippet}
+
+{#if isButton(attributes)}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		class:np-navigation-action-selected={selected}
+		class="np-navigation-action {attributes.class}"
+	>
+		{@render content()}
+	</button>
+{:else if isLink(attributes)}
+	<a {...attributes} class="np-navigation-action {attributes.class}">
+		{@render content()}
+	</a>
+{/if}
+
+<style>
+	.np-navigation-action {
+		cursor: pointer;
+		border: 0;
+		background: none;
+		align-items: center;
+		gap: 0.25rem;
+		display: flex;
+		flex-direction: column;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	}
+	.np-navigation-action-icon {
+		position: relative;
+		color: var(--np-color-on-surface-variant);
+		display: flex;
+		border-radius: var(--np-shape-corner-full);
+		justify-content: center;
+		width: 3.5rem;
+		height: 2rem;
+		align-items: center;
+	}
+	.np-navigation-action-label {
+		font-size: 0.75rem;
+		line-height: 1rem;
+		font-weight: 500;
+		transition: all;
+		color: var(--np-color-on-surface-variant);
+	}
+	.np-navigation-action-selected .np-navigation-action-icon {
+		color: var(--np-color-secondary-container);
+		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+	}
+	.np-navigation-action-icon::before {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		transform: scaleX(0.32);
+		transition-duration: 0.2s;
+		transition-property: transform, opacity;
+		transition-timing-function: linear;
+		background-color: var(--np-color-on-secondary-container);
+		border-radius: 100px;
+		z-index: -1;
+	}
+	.np-navigation-action-selected .np-navigation-action-icon::before {
+		opacity: 1;
+		transform: scaleX(1);
+	}
+
+	.np-navigation-action-selected .np-navigation-action-label {
+		font-weight: 700;
+		color: var(--np-color-on-surface);
+	}
+	.np-touch {
+		height: 56px;
+		position: absolute;
+		width: 80px;
+	}
+</style>

package/dist/navigation-rail/NavigationAction.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavigationAction } from './types.ts';
+declare const NavigationAction: any;
+type NavigationAction = ReturnType<typeof NavigationAction>;
+export default NavigationAction;

package/dist/navigation-rail/NavigationRail.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { NavigationRail } from './types.ts'
+
+	let { children, ...attributes }: NavigationRail = $props()
+</script>
+
+<nav {...attributes} class="navigation-rail">
+	{#if children}
+		{@render children()}
+	{/if}
+</nav>
+
+<style>
+	.navigation-rail {
+		z-index: 8;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		width: 80px;
+		gap: 0.75rem;
+		background-color: var(--np-color-surface);
+	}
+</style>

package/dist/navigation-rail/NavigationRail.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavigationRail } from './types.ts';
+declare const NavigationRail: any;
+type NavigationRail = ReturnType<typeof NavigationRail>;
+export default NavigationRail;

package/dist/navigation-rail/index.d.ts

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

package/dist/navigation-rail/index.js

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

package/dist/navigation-rail/types.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export type NavigationRail = HTMLAttributes<HTMLElement>;
+interface NavigationActionButton extends HTMLButtonAttributes {
+    icon: Snippet;
+    label: string;
+    selected?: boolean;
+}
+interface NavigationActionLink extends HTMLAnchorAttributes {
+    icon: Snippet;
+    label: string;
+    selected?: boolean;
+}
+export type NavigationAction = NavigationActionButton | NavigationActionLink;
+export {};

package/dist/navigation-rail/types.js

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

package/dist/types.d.ts

@@ -5,6 +5,7 @@ export * from './chip/types.ts';
 export * from './divider/types.js';
 export * from './list/types.ts';
 export * from './menu/types.ts';
+export * from './navigation-rail/types.ts';
 export * from './progress/types.js';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';

package/dist/types.js

@@ -5,6 +5,7 @@ export * from './chip/types.ts';
 export * from './divider/types.js';
 export * from './list/types.ts';
 export * from './menu/types.ts';
+export * from './navigation-rail/types.ts';
 export * from './progress/types.js';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {