noph-ui 0.5.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +1 -0
  2. package/dist/dialogs/index.d.ts +1 -0
  3. package/dist/dialogs/index.js +1 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +2 -0
  6. package/dist/navigation-rail/NavigationAction.svelte +119 -0
  7. package/dist/navigation-rail/NavigationAction.svelte.d.ts +4 -0
  8. package/dist/navigation-rail/NavigationRail.svelte +23 -0
  9. package/dist/navigation-rail/NavigationRail.svelte.d.ts +4 -0
  10. package/dist/navigation-rail/index.d.ts +1 -0
  11. package/dist/navigation-rail/index.js +1 -0
  12. package/dist/navigation-rail/types.d.ts +15 -0
  13. package/dist/navigation-rail/types.js +1 -0
  14. package/dist/types.d.ts +1 -0
  15. package/dist/types.js +1 -0
  16. package/package.json +92 -91
package/README.md CHANGED
@@ -72,6 +72,7 @@ In progress (Breaking changes expected)
72
72
  - Chips
73
73
  - Dialogs (Fullscreen + Docs missing)
74
74
  - Menus (Positioning missing + Docs missing)
75
+ - Navigation Rail (Badge is missing)
75
76
  - Tooltips (Positioning missing)
76
77
 
77
78
  Pending
package/dist/dialogs/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as Dialog } from './Dialog.svelte';
package/dist/dialogs/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as Dialog } from './Dialog.svelte';
package/dist/index.d.ts CHANGED
@@ -2,9 +2,11 @@ export * from './button/index.js';
2
2
  export * from './card/index.js';
3
3
  export * from './checkbox/index.js';
4
4
  export * from './chip/index.js';
5
+ export * from './dialogs/index.js';
5
6
  export * from './divider/index.js';
6
7
  export * from './list/index.js';
7
8
  export * from './menu/index.js';
9
+ export * from './navigation-rail/index.js';
8
10
  export * from './progress/index.js';
9
11
  export * from './radio/index.js';
10
12
  export * from './ripple/index.js';
package/dist/index.js CHANGED
@@ -2,9 +2,11 @@ export * from './button/index.js';
2
2
  export * from './card/index.js';
3
3
  export * from './checkbox/index.js';
4
4
  export * from './chip/index.js';
5
+ export * from './dialogs/index.js';
5
6
  export * from './divider/index.js';
6
7
  export * from './list/index.js';
7
8
  export * from './menu/index.js';
9
+ export * from './navigation-rail/index.js';
8
10
  export * from './progress/index.js';
9
11
  export * from './radio/index.js';
10
12
  export * from './ripple/index.js';
package/dist/navigation-rail/NavigationAction.svelte ADDED
@@ -0,0 +1,119 @@
1
+ <script lang="ts">
2
+ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
3
+ import type { NavigationAction } from './types.ts'
4
+ import Ripple from '../ripple/Ripple.svelte'
5
+
6
+ let { selected, icon, label, ...attributes }: NavigationAction = $props()
7
+ let touchEl: HTMLSpanElement | undefined = $state()
8
+
9
+ const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
10
+ return (obj as HTMLAnchorAttributes).href === undefined
11
+ }
12
+ const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
13
+ return (obj as HTMLAnchorAttributes).href !== undefined
14
+ }
15
+ </script>
16
+
17
+ {#snippet content()}
18
+ <div class="np-navigation-action-icon">
19
+ <Ripple forElement={touchEl} />
20
+ {@render icon()}
21
+ </div>
22
+ <div class="np-navigation-action-label">{label}</div>
23
+ <span class="np-touch" bind:this={touchEl}></span>
24
+ {/snippet}
25
+
26
+ {#if isButton(attributes)}
27
+ <button
28
+ {...attributes as HTMLButtonAttributes}
29
+ class:np-navigation-action-selected={selected}
30
+ class="np-navigation-action {attributes.class}"
31
+ >
32
+ {@render content()}
33
+ </button>
34
+ {:else if isLink(attributes)}
35
+ <a {...attributes} class="np-navigation-action {attributes.class}">
36
+ {@render content()}
37
+ </a>
38
+ {/if}
39
+
40
+ <style>
41
+ .np-navigation-action {
42
+ cursor: pointer;
43
+ border: 0;
44
+ background: none;
45
+ align-items: center;
46
+ gap: 0.25rem;
47
+ display: flex;
48
+ flex-direction: column;
49
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
50
+ }
51
+ .np-navigation-action:focus-visible {
52
+ outline-style: solid;
53
+ outline-color: var(--np-color-primary);
54
+ outline-width: 3px;
55
+ outline-offset: 2px;
56
+ border-radius: 1rem;
57
+ animation: focusAnimation 0.3s ease forwards;
58
+ }
59
+ @keyframes focusAnimation {
60
+ 0% {
61
+ outline-width: 3px;
62
+ }
63
+ 50% {
64
+ outline-width: 6px;
65
+ }
66
+ 100% {
67
+ outline-width: 3px;
68
+ }
69
+ }
70
+ .np-navigation-action-icon {
71
+ position: relative;
72
+ color: var(--np-color-on-surface-variant);
73
+ display: flex;
74
+ border-radius: var(--np-shape-corner-full);
75
+ justify-content: center;
76
+ width: 3.5rem;
77
+ height: 2rem;
78
+ align-items: center;
79
+ }
80
+ .np-navigation-action-label {
81
+ font-size: 0.75rem;
82
+ line-height: 1rem;
83
+ font-weight: 500;
84
+ transition: all;
85
+ color: var(--np-color-on-surface-variant);
86
+ }
87
+ .np-navigation-action-selected .np-navigation-action-icon {
88
+ color: var(--np-color-secondary-container);
89
+ --np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
90
+ }
91
+ .np-navigation-action-icon::before {
92
+ content: '';
93
+ position: absolute;
94
+ width: 100%;
95
+ height: 100%;
96
+ opacity: 0;
97
+ transform: scaleX(0.32);
98
+ transition-duration: 0.2s;
99
+ transition-property: transform, opacity;
100
+ transition-timing-function: linear;
101
+ background-color: var(--np-color-on-secondary-container);
102
+ border-radius: 100px;
103
+ z-index: -1;
104
+ }
105
+ .np-navigation-action-selected .np-navigation-action-icon::before {
106
+ opacity: 1;
107
+ transform: scaleX(1);
108
+ }
109
+
110
+ .np-navigation-action-selected .np-navigation-action-label {
111
+ font-weight: 700;
112
+ color: var(--np-color-on-surface);
113
+ }
114
+ .np-touch {
115
+ height: 56px;
116
+ position: absolute;
117
+ width: 80px;
118
+ }
119
+ </style>
package/dist/navigation-rail/NavigationAction.svelte.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { NavigationAction } from './types.ts';
2
+ declare const NavigationAction: any;
3
+ type NavigationAction = ReturnType<typeof NavigationAction>;
4
+ export default NavigationAction;
package/dist/navigation-rail/NavigationRail.svelte ADDED
@@ -0,0 +1,23 @@
1
+ <script lang="ts">
2
+ import type { NavigationRail } from './types.ts'
3
+
4
+ let { children, ...attributes }: NavigationRail = $props()
5
+ </script>
6
+
7
+ <nav {...attributes} class="navigation-rail">
8
+ {#if children}
9
+ {@render children()}
10
+ {/if}
11
+ </nav>
12
+
13
+ <style>
14
+ .navigation-rail {
15
+ z-index: 8;
16
+ display: flex;
17
+ flex-direction: column;
18
+ justify-content: space-between;
19
+ width: 80px;
20
+ gap: 0.75rem;
21
+ background-color: var(--np-color-surface);
22
+ }
23
+ </style>
package/dist/navigation-rail/NavigationRail.svelte.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { NavigationRail } from './types.ts';
2
+ declare const NavigationRail: any;
3
+ type NavigationRail = ReturnType<typeof NavigationRail>;
4
+ export default NavigationRail;
package/dist/navigation-rail/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as NavigationRail } from './NavigationRail.svelte';
package/dist/navigation-rail/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as NavigationRail } from './NavigationRail.svelte';
package/dist/navigation-rail/types.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
3
+ export type NavigationRail = HTMLAttributes<HTMLElement>;
4
+ interface NavigationActionButton extends HTMLButtonAttributes {
5
+ icon: Snippet;
6
+ label: string;
7
+ selected?: boolean;
8
+ }
9
+ interface NavigationActionLink extends HTMLAnchorAttributes {
10
+ icon: Snippet;
11
+ label: string;
12
+ selected?: boolean;
13
+ }
14
+ export type NavigationAction = NavigationActionButton | NavigationActionLink;
15
+ export {};
package/dist/navigation-rail/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/types.d.ts CHANGED
@@ -5,6 +5,7 @@ export * from './chip/types.ts';
5
5
  export * from './divider/types.js';
6
6
  export * from './list/types.ts';
7
7
  export * from './menu/types.ts';
8
+ export * from './navigation-rail/types.ts';
8
9
  export * from './progress/types.js';
9
10
  export * from './radio/types.ts';
10
11
  export * from './ripple/types.ts';
package/dist/types.js CHANGED
@@ -5,6 +5,7 @@ export * from './chip/types.ts';
5
5
  export * from './divider/types.js';
6
6
  export * from './list/types.ts';
7
7
  export * from './menu/types.ts';
8
+ export * from './navigation-rail/types.ts';
8
9
  export * from './progress/types.js';
9
10
  export * from './radio/types.ts';
10
11
  export * from './ripple/types.ts';
package/package.json CHANGED
@@ -1,92 +1,93 @@
1
1
  {
2
- "name": "noph-ui",
3
- "version": "0.5.0",
4
- "license": "MIT",
5
- "homepage": "https://noph.dev",
6
- "repository": {
7
- "type": "git",
8
- "url": "git+https://github.com/cnolte/noph-ui"
9
- },
10
- "author": {
11
- "name": "cnolte"
12
- },
13
- "keywords": [
14
- "svelte",
15
- "svelte 5",
16
- "material",
17
- "material 3",
18
- "material you",
19
- "m3",
20
- "ui",
21
- "frontend",
22
- "design-system",
23
- "ui-library",
24
- "theming"
25
- ],
26
- "exports": {
27
- ".": {
28
- "types": "./dist/index.d.ts",
29
- "svelte": "./dist/index.js"
30
- },
31
- "./icons": {
32
- "types": "./dist/icons/index.d.ts",
33
- "svelte": "./dist/icons/index.js"
34
- },
35
- "./types": {
36
- "types": "./dist/types.d.ts"
37
- },
38
- "./defaultTheme": {
39
- "import": "./dist/themes/defaultTheme.css",
40
- "require": "./dist/themes/defaultTheme.css"
41
- }
42
- },
43
- "sideEffects": [
44
- "**/*.css"
45
- ],
46
- "files": [
47
- "dist",
48
- "!dist/**/*.test.*",
49
- "!dist/**/*.spec.*"
50
- ],
51
- "peerDependencies": {
52
- "svelte": "^5.0.0"
53
- },
54
- "devDependencies": {
55
- "@material/material-color-utilities": "^0.3.0",
56
- "@playwright/test": "^1.49.1",
57
- "@sveltejs/adapter-vercel": "^5.5.2",
58
- "@sveltejs/kit": "^2.12.1",
59
- "@sveltejs/package": "^2.3.7",
60
- "@sveltejs/vite-plugin-svelte": "^5.0.2",
61
- "@types/eslint": "^9.6.1",
62
- "eslint": "^9.17.0",
63
- "eslint-config-prettier": "^9.1.0",
64
- "eslint-plugin-svelte": "^2.46.1",
65
- "globals": "^15.13.0",
66
- "prettier": "^3.4.2",
67
- "prettier-plugin-svelte": "^3.3.2",
68
- "publint": "^0.2.12",
69
- "svelte": "^5.14.3",
70
- "svelte-check": "^4.1.1",
71
- "typescript": "^5.7.2",
72
- "typescript-eslint": "^8.18.1",
73
- "vite": "^6.0.3",
74
- "vitest": "^2.1.8"
75
- },
76
- "svelte": "./dist/index.js",
77
- "types": "./dist/index.d.ts",
78
- "type": "module",
79
- "scripts": {
80
- "dev": "vite dev",
81
- "build": "vite build && npm run package",
82
- "preview": "vite preview",
83
- "package": "svelte-kit sync && svelte-package && publint",
84
- "test": "npm run test:integration && npm run test:unit",
85
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
86
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
87
- "lint": "prettier --check . && eslint .",
88
- "format": "prettier --write .",
89
- "test:integration": "playwright test",
90
- "test:unit": "vitest"
91
- }
92
- }
2
+ "name": "noph-ui",
3
+ "version": "0.6.1",
4
+ "license": "MIT",
5
+ "homepage": "https://noph.dev",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/cnolte/noph-ui"
9
+ },
10
+ "author": {
11
+ "name": "cnolte"
12
+ },
13
+ "keywords": [
14
+ "svelte",
15
+ "svelte 5",
16
+ "material",
17
+ "material 3",
18
+ "material you",
19
+ "m3",
20
+ "ui",
21
+ "frontend",
22
+ "design-system",
23
+ "ui-library",
24
+ "theming"
25
+ ],
26
+ "scripts": {
27
+ "dev": "vite dev",
28
+ "build": "vite build && npm run package",
29
+ "preview": "vite preview",
30
+ "package": "svelte-kit sync && svelte-package && publint",
31
+ "prepublishOnly": "npm run package",
32
+ "test": "npm run test:integration && npm run test:unit",
33
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
34
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
35
+ "lint": "prettier --check . && eslint .",
36
+ "format": "prettier --write .",
37
+ "test:integration": "playwright test",
38
+ "test:unit": "vitest"
39
+ },
40
+ "exports": {
41
+ ".": {
42
+ "types": "./dist/index.d.ts",
43
+ "svelte": "./dist/index.js"
44
+ },
45
+ "./icons": {
46
+ "types": "./dist/icons/index.d.ts",
47
+ "svelte": "./dist/icons/index.js"
48
+ },
49
+ "./types": {
50
+ "types": "./dist/types.d.ts"
51
+ },
52
+ "./defaultTheme": {
53
+ "import": "./dist/themes/defaultTheme.css",
54
+ "require": "./dist/themes/defaultTheme.css"
55
+ }
56
+ },
57
+ "sideEffects": [
58
+ "**/*.css"
59
+ ],
60
+ "files": [
61
+ "dist",
62
+ "!dist/**/*.test.*",
63
+ "!dist/**/*.spec.*"
64
+ ],
65
+ "peerDependencies": {
66
+ "svelte": "^5.0.0"
67
+ },
68
+ "devDependencies": {
69
+ "@material/material-color-utilities": "^0.3.0",
70
+ "@playwright/test": "^1.49.1",
71
+ "@sveltejs/adapter-vercel": "^5.5.2",
72
+ "@sveltejs/kit": "^2.12.1",
73
+ "@sveltejs/package": "^2.3.7",
74
+ "@sveltejs/vite-plugin-svelte": "^5.0.2",
75
+ "@types/eslint": "^9.6.1",
76
+ "eslint": "^9.17.0",
77
+ "eslint-config-prettier": "^9.1.0",
78
+ "eslint-plugin-svelte": "^2.46.1",
79
+ "globals": "^15.13.0",
80
+ "prettier": "^3.4.2",
81
+ "prettier-plugin-svelte": "^3.3.2",
82
+ "publint": "^0.2.12",
83
+ "svelte": "^5.14.3",
84
+ "svelte-check": "^4.1.1",
85
+ "typescript": "^5.7.2",
86
+ "typescript-eslint": "^8.18.1",
87
+ "vite": "^6.0.3",
88
+ "vitest": "^2.1.8"
89
+ },
90
+ "svelte": "./dist/index.js",
91
+ "types": "./dist/index.d.ts",
92
+ "type": "module"
93
+ }