@nkey-ui/theme - npm Package Compare versions

Comparing version 1.0.19 to 1.0.20

dist/components/index.d.ts

@@ -8,3 +8,4 @@ export { ButtonBaseVariantProps, ButtonGroupVariantProps, ButtonRippleVariantProps, ButtonVariantProps, IconButtonVariantProps, button, buttonBase, buttonGroup, buttonRipple, iconButton } from './button.js';
 export { BadgeVariantProps, badge } from './badge.js';
+export { NavbarContentVariantProps, NavbarMenuItemVariantProps, NavbarMenuToggleVariantProps, NavbarMenuVariantProps, NavbarVariantProps, navbar, navbarContent, navbarMenu, navbarMenuItem, navbarMenuToggle } from './navbar.js';
 import 'tailwind-variants/dist/config';
 import 'tailwind-variants';

dist/components/index.js

@@ -33,2 +33,7 @@ "use strict";
   iconButton: () => iconButton,
+  navbar: () => navbar,
+  navbarContent: () => navbarContent,
+  navbarMenu: () => navbarMenu,
+  navbarMenuItem: () => navbarMenuItem,
+  navbarMenuToggle: () => navbarMenuToggle,
   ripple: () => ripple,
@@ -423,2 +428,39 @@ skeleton: () => skeleton,
 });
+
+// src/components/navbar.ts
+var import_tailwind_variants8 = require("tailwind-variants");
+var navbar = (0, import_tailwind_variants8.tv)({
+  base: "border-divider bg-background/70 sticky inset-x-0 top-0 z-40 flex items-stretch justify-between border-b px-6 backdrop-blur-lg backdrop-saturate-150",
+  variants: {
+    isMenuOpen: {
+      true: "border-none backdrop-blur-xl"
+    }
+  }
+});
+var navbarContent = (0, import_tailwind_variants8.tv)({
+  base: "flex h-full items-center gap-4"
+});
+var navbarMenu = (0, import_tailwind_variants8.tv)({
+  slots: {
+    collapse: "bg-background/70 text-large fixed inset-x-0 z-40 backdrop-blur-xl backdrop-saturate-150 transition-[height]",
+    menu: "flex h-full flex-col gap-2 overflow-y-auto px-6 pt-2"
+  }
+});
+var navbarMenuItem = (0, import_tailwind_variants8.tv)({
+  base: "flex h-full items-center font-medium",
+  variants: {
+    isActive: { true: "text-focus font-bold" }
+  }
+});
+var navbarMenuToggle = (0, import_tailwind_variants8.tv)({
+  base: "h-6 w-6 outline-none",
+  slots: {
+    toggle: 'pointer-events-none flex h-full w-full flex-col items-center justify-center transition-opacity before:block before:h-px before:w-6 before:-translate-y-1 before:rotate-0 before:bg-current before:transition-transform before:duration-150 before:content-[""] after:block after:h-px after:w-6 after:translate-y-1 after:rotate-0 after:bg-current after:transition-transform after:duration-150 after:content-[""]'
+  },
+  variants: {
+    isMenuOpen: {
+      true: { toggle: "before:translate-y-px before:rotate-45 after:translate-y-0 after:-rotate-45" }
+    }
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
@@ -436,2 +478,7 @@ 0 && (module.exports = {
   iconButton,
+  navbar,
+  navbarContent,
+  navbarMenu,
+  navbarMenuItem,
+  navbarMenuToggle,
   ripple,
@@ -438,0 +485,0 @@ skeleton,

dist/index.d.ts

@@ -8,2 +8,3 @@ export { ButtonBaseVariantProps, ButtonGroupVariantProps, ButtonRippleVariantProps, ButtonVariantProps, IconButtonVariantProps, button, buttonBase, buttonGroup, buttonRipple, iconButton } from './components/button.js';
 export { BadgeVariantProps, badge } from './components/badge.js';
+export { NavbarContentVariantProps, NavbarMenuItemVariantProps, NavbarMenuToggleVariantProps, NavbarMenuVariantProps, NavbarVariantProps, navbar, navbarContent, navbarMenu, navbarMenuItem, navbarMenuToggle } from './components/navbar.js';
 export { baseStyles } from './utils/classes.js';
@@ -10,0 +11,0 @@ export { colors } from './colors/index.js';

dist/index.js

@@ -112,2 +112,7 @@ "use strict";
   iconButton: () => iconButton,
+  navbar: () => navbar,
+  navbarContent: () => navbarContent,
+  navbarMenu: () => navbarMenu,
+  navbarMenuItem: () => navbarMenuItem,
+  navbarMenuToggle: () => navbarMenuToggle,
   nkeyui: () => nkeyui,
@@ -119,3 +124,3 @@ ripple: () => ripple,
   spinnerCircle: () => spinnerCircle,
-  tv: () => import_tailwind_variants8.tv
+  tv: () => import_tailwind_variants9.tv
 });
@@ -507,2 +512,39 @@ module.exports = __toCommonJS(src_exports);
 
+// src/components/navbar.ts
+var import_tailwind_variants8 = require("tailwind-variants");
+var navbar = (0, import_tailwind_variants8.tv)({
+  base: "border-divider bg-background/70 sticky inset-x-0 top-0 z-40 flex items-stretch justify-between border-b px-6 backdrop-blur-lg backdrop-saturate-150",
+  variants: {
+    isMenuOpen: {
+      true: "border-none backdrop-blur-xl"
+    }
+  }
+});
+var navbarContent = (0, import_tailwind_variants8.tv)({
+  base: "flex h-full items-center gap-4"
+});
+var navbarMenu = (0, import_tailwind_variants8.tv)({
+  slots: {
+    collapse: "bg-background/70 text-large fixed inset-x-0 z-40 backdrop-blur-xl backdrop-saturate-150 transition-[height]",
+    menu: "flex h-full flex-col gap-2 overflow-y-auto px-6 pt-2"
+  }
+});
+var navbarMenuItem = (0, import_tailwind_variants8.tv)({
+  base: "flex h-full items-center font-medium",
+  variants: {
+    isActive: { true: "text-focus font-bold" }
+  }
+});
+var navbarMenuToggle = (0, import_tailwind_variants8.tv)({
+  base: "h-6 w-6 outline-none",
+  slots: {
+    toggle: 'pointer-events-none flex h-full w-full flex-col items-center justify-center transition-opacity before:block before:h-px before:w-6 before:-translate-y-1 before:rotate-0 before:bg-current before:transition-transform before:duration-150 before:content-[""] after:block after:h-px after:w-6 after:translate-y-1 after:rotate-0 after:bg-current after:transition-transform after:duration-150 after:content-[""]'
+  },
+  variants: {
+    isMenuOpen: {
+      true: { toggle: "before:translate-y-px before:rotate-45 after:translate-y-0 after:-rotate-45" }
+    }
+  }
+});
+
 // src/utils/classes.ts
@@ -1094,3 +1136,3 @@ var baseStyles = (prefix) => ({
 // src/index.ts
-var import_tailwind_variants8 = require("tailwind-variants");
+var import_tailwind_variants9 = require("tailwind-variants");
 // Annotate the CommonJS export names for ESM import in node:
@@ -1111,2 +1153,7 @@ 0 && (module.exports = {
   iconButton,
+  navbar,
+  navbarContent,
+  navbarMenu,
+  navbarMenuItem,
+  navbarMenuToggle,
   nkeyui,
@@ -1113,0 +1160,0 @@ ripple,

package.json

 {
   "name": "@nkey-ui/theme",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "The default theme for NkeyUI components",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

255070

increased by6.03%

Number of package files

136

increased by3.03%

Lines of code

8654

increased by4.87%

No dependency changes