@vllnt/ui 0.3.0-canary.ce98eca → 0.3.0-canary.f067625

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 (3) hide show
  1. package/dist/components/navbar-saas/navbar-saas.js +54 -46
  2. package/package.json +1 -1
  3. package/styles.css +27 -0
package/dist/components/navbar-saas/navbar-saas.js CHANGED
@@ -16,53 +16,61 @@ function NavbarSaas({
16
16
  }) {
17
17
  const pathname = usePathname();
18
18
  const { open, setOpen } = useSidebar();
19
- return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 items-center justify-between px-4", children: [
20
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
21
- showMobileMenu ? /* @__PURE__ */ jsx(
22
- Button,
23
- {
24
- "aria-expanded": open,
25
- "aria-label": "Toggle sidebar",
26
- "data-testid": "navbar-saas-mobile-trigger",
27
- onClick: () => {
28
- setOpen(!open);
29
- },
30
- size: "icon",
31
- variant: "ghost",
32
- children: open ? /* @__PURE__ */ jsx(X, { className: "size-4" }) : /* @__PURE__ */ jsx(Menu, { className: "size-4" })
33
- }
34
- ) : null,
35
- brand ? typeof brand === "string" ? /* @__PURE__ */ jsx(Link, { className: "text-xl font-bold truncate", href: "/", children: brand }) : brand : null,
36
- navItems.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "hidden lg:flex gap-6", children: navItems.map((item) => /* @__PURE__ */ jsx(
37
- Link,
38
- {
39
- className: cn(
40
- "text-sm font-medium transition-colors hover:text-foreground/80",
41
- pathname === item.href ? "text-foreground" : "text-foreground/60"
42
- ),
43
- href: item.href,
44
- children: item.title
45
- },
46
- item.href
47
- )) }) : null
48
- ] }),
49
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
50
- rightSlot,
51
- /* @__PURE__ */ jsx(
52
- ThemeToggle,
53
- {
54
- dict: {
55
- theme: {
56
- dark: "Dark",
57
- light: "Light",
58
- system: "System",
59
- toggle_theme: "Toggle theme"
19
+ return /* @__PURE__ */ jsx(
20
+ "header",
21
+ {
22
+ className: "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0",
23
+ "data-slot": "navbar-saas",
24
+ style: { WebkitBackdropFilter: "blur(8px)" },
25
+ children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 items-center justify-between px-4", children: [
26
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
27
+ showMobileMenu ? /* @__PURE__ */ jsx(
28
+ Button,
29
+ {
30
+ "aria-expanded": open,
31
+ "aria-label": "Toggle sidebar",
32
+ "data-testid": "navbar-saas-mobile-trigger",
33
+ onClick: () => {
34
+ setOpen(!open);
35
+ },
36
+ size: "icon",
37
+ variant: "ghost",
38
+ children: open ? /* @__PURE__ */ jsx(X, { className: "size-4" }) : /* @__PURE__ */ jsx(Menu, { className: "size-4" })
60
39
  }
61
- }
62
- }
63
- )
64
- ] })
65
- ] }) }) });
40
+ ) : null,
41
+ brand ? typeof brand === "string" ? /* @__PURE__ */ jsx(Link, { className: "text-xl font-bold truncate", href: "/", children: brand }) : brand : null,
42
+ navItems.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "hidden lg:flex gap-6", children: navItems.map((item) => /* @__PURE__ */ jsx(
43
+ Link,
44
+ {
45
+ className: cn(
46
+ "text-sm font-medium transition-colors hover:text-foreground/80",
47
+ pathname === item.href ? "text-foreground" : "text-foreground/60"
48
+ ),
49
+ href: item.href,
50
+ children: item.title
51
+ },
52
+ item.href
53
+ )) }) : null
54
+ ] }),
55
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
56
+ rightSlot,
57
+ /* @__PURE__ */ jsx(
58
+ ThemeToggle,
59
+ {
60
+ dict: {
61
+ theme: {
62
+ dark: "Dark",
63
+ light: "Light",
64
+ system: "System",
65
+ toggle_theme: "Toggle theme"
66
+ }
67
+ }
68
+ }
69
+ )
70
+ ] })
71
+ ] }) })
72
+ }
73
+ );
66
74
  }
67
75
  export {
68
76
  NavbarSaas
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vllnt/ui",
3
- "version": "0.3.0-canary.ce98eca",
3
+ "version": "0.3.0-canary.f067625",
4
4
  "description": "React component library — 225 components built on Radix UI, Tailwind CSS, and CVA",
5
5
  "license": "MIT",
6
6
  "author": "vllnt",
package/styles.css CHANGED
@@ -202,3 +202,30 @@
202
202
  }
203
203
  }
204
204
 
205
+ /*
206
+ * Safari < 15.4 lacks oklch(): every `oklch(var(--token) / a)` color drops to
207
+ * its initial value, leaving the sticky navbar (and body) illegible. Give the
208
+ * core chrome a solid sRGB fallback, theme-aware. Gated so any browser with
209
+ * oklch() support ignores this block entirely.
210
+ */
211
+ @supports not (color: oklch(0 0 0)) {
212
+ body {
213
+ background-color: #ffffff;
214
+ color: #1a1a1a;
215
+ }
216
+ .dark body {
217
+ background-color: #000000;
218
+ color: #fafafa;
219
+ }
220
+ header[data-slot="navbar-saas"] {
221
+ background-color: #ffffff;
222
+ color: #1a1a1a;
223
+ border-color: #ebebeb;
224
+ }
225
+ .dark header[data-slot="navbar-saas"] {
226
+ background-color: #000000;
227
+ color: #fafafa;
228
+ border-color: #2a2a2a;
229
+ }
230
+ }
231
+