@nextworks/blocks-templates 0.2.0-alpha.8 → 0.2.0-alpha.9

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/README.md +1 -1
  2. package/dist/templates/productlaunch/components/Navbar.jsx +79 -75
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -14,7 +14,7 @@ Included templates (subject to change):
14
14
  Most developers should install Blocks via the **nextworks** CLI (copy-in / shadcn-style) rather than consuming this package directly.
15
15
 
16
16
  ```bash
17
- npx nextworks@latest add blocks --sections --templates
17
+ npx nextworks@latest add blocks --templates
18
18
  ```
19
19
 
20
20
  - npm (CLI): https://www.npmjs.com/package/nextworks
package/dist/templates/productlaunch/components/Navbar.jsx CHANGED
@@ -1,81 +1,85 @@
1
- // app/templates/productlaunch/components/Navbar.tsx
2
1
  "use client";
3
2
  import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
4
3
  const defaultProps = {
5
- brand: "IntelliOpAI",
6
- menuItems: [
7
- { label: "Home", href: "#home" },
8
- { label: "Features", href: "#features" },
9
- { label: "Pricing", href: "#pricing" },
10
- { label: "FAQ", href: "#faq" },
11
- { label: "Contact", href: "#contact" },
12
- ],
13
- ctaButton: null,
14
- showColorModeToggle: true,
15
- navHeight: "h-16",
16
- sticky: true,
17
- ariaLabel: "IntelliOpAI main navigation",
18
- // Top-level className is left empty so page-level overrides can add layout constraints if needed.
19
- className: "",
20
- // Style slots tuned for the purple theme
21
- nav: {
22
- className: "bg-white dark:bg-gray-900 text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-800 " +
23
- // Accent variables for this preset (read by toggle, links, mobile links)
24
- "[--navbar-accent:theme(colors.purple.600)] dark:[--navbar-accent:theme(colors.purple.400)] " +
25
- "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
26
- "[--navbar-hover-bg:theme(colors.purple.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.17 0.05 324) 20%, transparent)] " +
27
- "[--navbar-ring:theme(colors.purple.500)] dark:[--navbar-ring:theme(colors.purple.400)] " +
28
- "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
29
- },
30
- brandText: {
31
- className: "text-xl md:text-2xl font-bold font-outfit text-purple-700 dark:text-purple-500",
32
- },
33
- links: {
34
- className: "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-purple-700 dark:hover:text-purple-500 " +
35
- "focus:ring-[var(--navbar-ring)]",
36
- },
37
- // Preset keeps CTA hidden; if you enable it, these defaults give a subtle lift effect
38
- ctaButtonStyle: {
39
- variant: "default",
40
- size: "default",
41
- className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
42
- },
43
- mobileMenu: {
44
- className: "border-t border-gray-200 dark:border-gray-800",
45
- },
46
- container: {
47
- className: "max-w-7xl mx-auto",
48
- },
49
- brandWrapper: {
50
- className: "", // Base layout is provided by SharedNavbar; override here if needed
51
- },
52
- desktopMenu: {
53
- className: "hidden items-center space-x-1 md:flex lg:space-x-6",
54
- },
55
- toggleButton: {
56
- className: "md:hidden flex items-center justify-center rounded-md p-2 transition-colors " +
57
- "hover:bg-purple-50 dark:hover:bg-purple-900/20 " +
58
- "focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400",
59
- },
60
- colorModeWrapper: {
61
- className: "ml-2",
62
- },
63
- // With variables above, ThemeToggle can rely on them; explicit override optional
64
- // themeToggle: { ... }
65
- ctaButtonWrapper: {
66
- className: "ml-2",
67
- },
68
- mobileMenuInner: {
69
- className: "space-y-2 px-4 pt-2 pb-4",
70
- },
71
- // Mobile links will read --navbar-hover-bg; explicit class optional
72
- mobileLinks: {
73
- className: "hover:bg-[var(--navbar-hover-bg)]",
74
- },
4
+ brand: "IntelliOpAI",
5
+ menuItems: [
6
+ { label: "Home", href: "#home" },
7
+ { label: "Features", href: "#features" },
8
+ { label: "Pricing", href: "#pricing" },
9
+ { label: "FAQ", href: "#faq" },
10
+ { label: "Contact", href: "#contact" },
11
+ ],
12
+ ctaButton: null,
13
+ showColorModeToggle: true,
14
+ navHeight: "h-16",
15
+ sticky: true,
16
+ ariaLabel: "IntelliOpAI main navigation",
17
+ // Top-level className is left empty so page-level overrides can add layout constraints if needed.
18
+ className: "",
19
+ // Style slots tuned for the purple theme
20
+ nav: {
21
+ className:
22
+ "bg-white dark:bg-gray-900 text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-800 " +
23
+ // Accent variables for this preset (read by toggle, links, mobile links)
24
+ "[--navbar-accent:theme(colors.purple.600)] dark:[--navbar-accent:theme(colors.purple.400)] " +
25
+ "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
26
+ "[--navbar-hover-bg:theme(colors.purple.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.17 0.05 324) 20%, transparent)] " +
27
+ "[--navbar-ring:theme(colors.purple.500)] dark:[--navbar-ring:theme(colors.purple.400)] " +
28
+ "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
29
+ },
30
+ brandText: {
31
+ className:
32
+ "text-xl md:text-2xl font-bold font-outfit text-purple-700 dark:text-purple-500",
33
+ },
34
+ links: {
35
+ className:
36
+ "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-purple-700 dark:hover:text-purple-500 " +
37
+ "focus:ring-[var(--navbar-ring)]",
38
+ },
39
+ // Preset keeps CTA hidden; if you enable it, these defaults give a subtle lift effect
40
+ ctaButtonStyle: {
41
+ variant: "default",
42
+ size: "default",
43
+ className:
44
+ "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
45
+ },
46
+ mobileMenu: {
47
+ className: "border-t border-gray-200 dark:border-gray-800",
48
+ },
49
+ container: {
50
+ className: "max-w-7xl mx-auto",
51
+ },
52
+ brandWrapper: {
53
+ className: "", // Base layout is provided by SharedNavbar; override here if needed
54
+ },
55
+ desktopMenu: {
56
+ className: "hidden items-center space-x-1 md:flex lg:space-x-6",
57
+ },
58
+ toggleButton: {
59
+ className:
60
+ "md:hidden flex items-center justify-center rounded-md p-2 transition-colors " +
61
+ "hover:bg-purple-50 dark:hover:bg-purple-900/20 " +
62
+ "focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400",
63
+ },
64
+ colorModeWrapper: {
65
+ className: "ml-2",
66
+ },
67
+ // With variables above, ThemeToggle can rely on them; explicit override optional
68
+ // themeToggle: { ... }
69
+ ctaButtonWrapper: {
70
+ className: "ml-2",
71
+ },
72
+ mobileMenuInner: {
73
+ className: "space-y-2 px-4 pt-2 pb-4",
74
+ },
75
+ // Mobile links will read --navbar-hover-bg; explicit class optional
76
+ mobileLinks: {
77
+ className: "hover:bg-[var(--navbar-hover-bg)]",
78
+ },
75
79
  };
76
80
  export function Navbar(overrides = {}) {
77
- // Shallow-merge: passing a style-slot object (e.g., links, nav, etc.)
78
- // replaces the default for that slot. This keeps the API simple and predictable.
79
- const props = Object.assign(Object.assign({}, defaultProps), overrides);
80
- return <SharedNavbar {...props}/>;
81
+ // Shallow-merge: passing a style-slot object (e.g., links, nav, etc.)
82
+ // replaces the default for that slot. This keeps the API simple and predictable.
83
+ const props = Object.assign(Object.assign({}, defaultProps), overrides);
84
+ return <SharedNavbar {...props} />;
81
85
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nextworks/blocks-templates",
3
- "version": "0.2.0-alpha.8",
3
+ "version": "0.2.0-alpha.9",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -16,8 +16,8 @@
16
16
  "build": "npx tsc -p tsconfig.json"
17
17
  },
18
18
  "dependencies": {
19
- "@nextworks/blocks-core": "0.2.0-alpha.8",
20
- "@nextworks/blocks-sections": "0.2.0-alpha.8",
19
+ "@nextworks/blocks-core": "0.2.0-alpha.9",
20
+ "@nextworks/blocks-sections": "0.2.0-alpha.9",
21
21
  "lucide-react": "^0.542.0"
22
22
  },
23
23
  "devDependencies": {