noph-ui 0.21.17 → 0.22.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 (5) hide show
  1. package/dist/badge/Badge.svelte +42 -0
  2. package/dist/badge/Badge.svelte.d.ts +6 -0
  3. package/dist/tabs/Tab.svelte +48 -5
  4. package/dist/tabs/types.d.ts +2 -0
  5. package/package.json +3 -3
package/dist/badge/Badge.svelte ADDED
@@ -0,0 +1,42 @@
1
+ <script lang="ts">
2
+ let { label }: { label?: string } = $props()
3
+ </script>
4
+
5
+ <div class="np-badge-container">
6
+ {#if label}
7
+ <div class="np-badge-label">
8
+ {label}
9
+ </div>
10
+ {:else}
11
+ <div class="np-badge-no-label"></div>
12
+ {/if}
13
+ </div>
14
+
15
+ <style>
16
+ .np-badge-container {
17
+ display: inline-block;
18
+ background-color: var(--np-color-error);
19
+ border-radius: var(--np-shape-corner-full);
20
+ text-align: center;
21
+ position: var(--np-badge-position, absolute);
22
+ top: var(--np-badge-top, 0);
23
+ left: var(--np-badge-left, auto);
24
+ right: var(--np-badge-right, auto);
25
+ }
26
+ .np-badge-no-label {
27
+ width: 0.375rem;
28
+ height: 0.375rem;
29
+ }
30
+ .np-badge-label {
31
+ color: var(--np-color-on-error);
32
+ padding-inline: 0.25rem;
33
+ min-width: 0.5rem;
34
+ font-weight: 500;
35
+ font-size: 0.6875rem;
36
+ height: 1rem;
37
+ display: flex;
38
+ align-items: center;
39
+ text-align: center;
40
+ justify-content: center;
41
+ }
42
+ </style>
package/dist/badge/Badge.svelte.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ type $$ComponentProps = {
2
+ label?: string;
3
+ };
4
+ declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
5
+ type Badge = ReturnType<typeof Badge>;
6
+ export default Badge;
package/dist/tabs/Tab.svelte CHANGED
@@ -2,6 +2,7 @@
2
2
  import Ripple from '../ripple/Ripple.svelte'
3
3
  import { getContext } from 'svelte'
4
4
  import type { TabProps } from './types.ts'
5
+ import Badge from '../badge/Badge.svelte'
5
6
 
6
7
  let {
7
8
  children,
@@ -12,6 +13,8 @@
12
13
  value,
13
14
  href,
14
15
  variant = 'primary',
16
+ badge = false,
17
+ badgeLabel,
15
18
  ...attributes
16
19
  }: TabProps = $props()
17
20
  let activeTab: { value: string | number; node: HTMLElement } = getContext('activeTab')
@@ -82,8 +85,23 @@
82
85
  !inlineIcon && variant === 'primary' && children && icon && 'np-tab-no-inline',
83
86
  ]}
84
87
  >
85
- {@render icon?.()}
86
- {@render children?.()}
88
+ {#if icon}
89
+ {#if badge && variant === 'primary' && !inlineIcon}
90
+ <div class="np-tab-icon-badge">
91
+ <Badge label={badgeLabel} />
92
+ {@render icon?.()}
93
+ </div>
94
+ {:else}
95
+ {@render icon?.()}
96
+ {/if}
97
+ {/if}
98
+ {#if badge && (!icon || variant === 'secondary' || inlineIcon)}
99
+ <div style="--np-badge-position:static;">
100
+ <span class="np-tab-label-badge">{@render children?.()}</span><Badge label={badgeLabel} />
101
+ </div>
102
+ {:else}
103
+ {@render children?.()}
104
+ {/if}
87
105
  {#if variant === 'primary'}
88
106
  <div class="np-indicator"></div>
89
107
  {/if}
@@ -104,7 +122,12 @@
104
122
  role="tab"
105
123
  bind:this={element}
106
124
  {href}
107
- class={['np-tab', isActive && 'np-tab-content-active', attributes.class]}
125
+ class={[
126
+ 'np-tab',
127
+ isActive && 'np-tab-content-active',
128
+ variant === 'primary' ? 'primary' : 'secondary',
129
+ attributes.class,
130
+ ]}
108
131
  onclick={onClick}
109
132
  onkeydown={onKeyDown}
110
133
  >
@@ -117,7 +140,12 @@
117
140
  tabindex={isActive ? 0 : -1}
118
141
  role="tab"
119
142
  bind:this={element}
120
- class={['np-tab', isActive && 'np-tab-content-active', attributes.class]}
143
+ class={[
144
+ 'np-tab',
145
+ isActive && 'np-tab-content-active',
146
+ variant === 'primary' ? 'primary' : 'secondary',
147
+ attributes.class,
148
+ ]}
121
149
  onclick={onClick}
122
150
  onkeydown={onKeyDown}
123
151
  >
@@ -139,11 +167,17 @@
139
167
  padding: 0 1rem;
140
168
  color: var(--np-color-on-surface-variant);
141
169
  height: 3rem;
170
+ transition: color 0.3s ease;
142
171
  }
143
172
  .np-tab-content-active {
144
- color: var(--np-color-primary);
145
173
  --_focus-bottom: 4px;
146
174
  }
175
+ .np-tab-content-active.primary {
176
+ color: var(--np-color-primary);
177
+ }
178
+ .np-tab-content-active.secondary {
179
+ color: var(--np-color-on-surface);
180
+ }
147
181
  .np-tab-content {
148
182
  height: 100%;
149
183
  }
@@ -160,6 +194,15 @@
160
194
  text-wrap: nowrap;
161
195
  min-width: 1.5rem;
162
196
  }
197
+ .np-tab-label-badge {
198
+ margin-right: 4px;
199
+ }
200
+ .np-tab-icon-badge {
201
+ height: 1.5rem;
202
+ width: 1.5rem;
203
+ position: relative;
204
+ --np-badge-left: 1.125rem;
205
+ }
163
206
 
164
207
  .np-tab-no-inline {
165
208
  flex-direction: column;
package/dist/tabs/types.d.ts CHANGED
@@ -6,6 +6,8 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
6
6
  value: string | number;
7
7
  href?: string;
8
8
  icon?: Snippet;
9
+ badge?: boolean;
10
+ badgeLabel?: string;
9
11
  }
10
12
  export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
11
13
  value: string | number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.21.17",
3
+ "version": "0.22.1",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -57,8 +57,8 @@
57
57
  "@eslint/js": "^9.33.0",
58
58
  "@material/material-color-utilities": "^0.3.0",
59
59
  "@playwright/test": "^1.54.2",
60
- "@sveltejs/adapter-vercel": "^5.8.2",
61
- "@sveltejs/kit": "^2.29.1",
60
+ "@sveltejs/adapter-vercel": "^5.9.1",
61
+ "@sveltejs/kit": "^2.31.1",
62
62
  "@sveltejs/package": "^2.4.1",
63
63
  "@sveltejs/vite-plugin-svelte": "^6.1.2",
64
64
  "@types/eslint": "^9.6.1",