@retinalabsllc/zairusjs 0.1.5 → 0.1.6

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/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +23 -7
  4. package/dist/index.mjs +23 -7
  5. package/package.json +3 -2
package/dist/index.d.mts CHANGED
@@ -33,6 +33,8 @@ interface HeaderProps {
33
33
  showLogo?: boolean;
34
34
  invert?: boolean;
35
35
  hideHeaderText?: boolean;
36
+ light?: boolean;
37
+ compact?: boolean;
36
38
  }
37
39
  declare const Header: React.FC<HeaderProps>;
38
40
 
package/dist/index.d.ts CHANGED
@@ -33,6 +33,8 @@ interface HeaderProps {
33
33
  showLogo?: boolean;
34
34
  invert?: boolean;
35
35
  hideHeaderText?: boolean;
36
+ light?: boolean;
37
+ compact?: boolean;
36
38
  }
37
39
  declare const Header: React.FC<HeaderProps>;
38
40
 
package/dist/index.js CHANGED
@@ -169,14 +169,21 @@ var import_react4 = __toESM(require("react"));
169
169
  var import_link2 = __toESM(require("next/link"));
170
170
  var import_image = __toESM(require("next/image"));
171
171
  var import_navigation = require("next/navigation");
172
- var NavLink = ({ href, children, className = "" }) => {
172
+ var NavLink = ({
173
+ href,
174
+ children,
175
+ className = "",
176
+ light = true
177
+ }) => {
173
178
  const pathname = (0, import_navigation.usePathname)();
174
179
  const isActive = pathname === href;
180
+ const activeClass = light ? "text-neutral-950 font-medium" : "text-white font-medium";
181
+ const inactiveClass = light ? "text-neutral-600 hover:text-neutral-950" : "text-neutral-400 hover:text-white";
175
182
  return /* @__PURE__ */ import_react4.default.createElement(
176
183
  import_link2.default,
177
184
  {
178
185
  href,
179
- className: `px-3 py-1.5 text-xs transition-colors duration-200 rounded-full ${isActive ? "text-white font-medium" : "text-neutral-400 hover:text-white"} ${className}`
186
+ className: `px-3 py-1.5 text-xs transition-colors duration-200 rounded-full ${isActive ? activeClass : inactiveClass} ${className}`
180
187
  },
181
188
  children
182
189
  );
@@ -188,9 +195,17 @@ var Header = ({
188
195
  links,
189
196
  showLogo = true,
190
197
  invert = false,
191
- hideHeaderText = false
198
+ hideHeaderText = false,
199
+ light = true,
200
+ // Defaults to true (white background)
201
+ compact = false
202
+ // Defaults to false (full width)
192
203
  }) => {
193
- return /* @__PURE__ */ import_react4.default.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto" }, /* @__PURE__ */ import_react4.default.createElement("header", { className: "w-full bg-black/95 backdrop-blur-md rounded-full py-2 px-6 flex justify-between items-center shadow-[0_8px_60px_rgba(0,0,0,0.2)] border border-white/10" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react4.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70" }, showLogo && /* @__PURE__ */ import_react4.default.createElement(
204
+ const headerBgStyle = light ? "bg-white/95 border-white/40 shadow-[0_8px_60px_rgba(0,0,0,0.06)]" : "bg-black/95 border-white/10 shadow-[0_8px_60px_rgba(0,0,0,0.2)]";
205
+ const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
206
+ const titleColor = light ? "text-black" : "text-white";
207
+ const subtitleColor = light ? "text-neutral-500" : "text-neutral-400";
208
+ return /* @__PURE__ */ import_react4.default.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ import_react4.default.createElement("header", { className: `${headerLayoutWidth} ${headerBgStyle} backdrop-blur-md rounded-full py-2 px-6 flex items-center border transition-all duration-300` }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ import_react4.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70" }, showLogo && /* @__PURE__ */ import_react4.default.createElement(
194
209
  import_image.default,
195
210
  {
196
211
  src: logoSrc,
@@ -200,12 +215,13 @@ var Header = ({
200
215
  className: `object-contain w-5 h-auto ${invert ? "invert" : ""}`,
201
216
  priority: true
202
217
  }
203
- ), !hideHeaderText && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-[12px] text-white leading-none tracking-wide mb-1" }, companyName), subtitle && /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest leading-none" }, subtitle)))), /* @__PURE__ */ import_react4.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2" }, links.map((link, index) => /* @__PURE__ */ import_react4.default.createElement(
218
+ ), !hideHeaderText && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: `text-[12px] leading-none tracking-wide mb-1 transition-colors ${titleColor}` }, companyName), subtitle && /* @__PURE__ */ import_react4.default.createElement("span", { className: `text-[9px] tracking-widest leading-none transition-colors ${subtitleColor}` }, subtitle)))), /* @__PURE__ */ import_react4.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ import_react4.default.createElement(
204
219
  NavLink,
205
220
  {
206
221
  key: index,
207
222
  href: link.href,
208
- className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
223
+ className: link.hideOnMobile ? "hidden sm:inline-flex" : "",
224
+ light
209
225
  },
210
226
  link.label
211
227
  ))))));
@@ -282,7 +298,7 @@ var HeroSection = ({
282
298
  {
283
299
  className: "absolute inset-0 w-full h-full pointer-events-none z-0",
284
300
  style: {
285
- background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, #ffffff 100%)`
301
+ background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, transparent 100%)`
286
302
  }
287
303
  }
288
304
  ), /* @__PURE__ */ import_react7.default.createElement(
package/dist/index.mjs CHANGED
@@ -114,14 +114,21 @@ import React3 from "react";
114
114
  import Link2 from "next/link";
115
115
  import Image from "next/image";
116
116
  import { usePathname } from "next/navigation";
117
- var NavLink = ({ href, children, className = "" }) => {
117
+ var NavLink = ({
118
+ href,
119
+ children,
120
+ className = "",
121
+ light = true
122
+ }) => {
118
123
  const pathname = usePathname();
119
124
  const isActive = pathname === href;
125
+ const activeClass = light ? "text-neutral-950 font-medium" : "text-white font-medium";
126
+ const inactiveClass = light ? "text-neutral-600 hover:text-neutral-950" : "text-neutral-400 hover:text-white";
120
127
  return /* @__PURE__ */ React3.createElement(
121
128
  Link2,
122
129
  {
123
130
  href,
124
- className: `px-3 py-1.5 text-xs transition-colors duration-200 rounded-full ${isActive ? "text-white font-medium" : "text-neutral-400 hover:text-white"} ${className}`
131
+ className: `px-3 py-1.5 text-xs transition-colors duration-200 rounded-full ${isActive ? activeClass : inactiveClass} ${className}`
125
132
  },
126
133
  children
127
134
  );
@@ -133,9 +140,17 @@ var Header = ({
133
140
  links,
134
141
  showLogo = true,
135
142
  invert = false,
136
- hideHeaderText = false
143
+ hideHeaderText = false,
144
+ light = true,
145
+ // Defaults to true (white background)
146
+ compact = false
147
+ // Defaults to false (full width)
137
148
  }) => {
138
- return /* @__PURE__ */ React3.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React3.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto" }, /* @__PURE__ */ React3.createElement("header", { className: "w-full bg-black/95 backdrop-blur-md rounded-full py-2 px-6 flex justify-between items-center shadow-[0_8px_60px_rgba(0,0,0,0.2)] border border-white/10" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React3.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70" }, showLogo && /* @__PURE__ */ React3.createElement(
149
+ const headerBgStyle = light ? "bg-white/95 border-white/40 shadow-[0_8px_60px_rgba(0,0,0,0.06)]" : "bg-black/95 border-white/10 shadow-[0_8px_60px_rgba(0,0,0,0.2)]";
150
+ const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
151
+ const titleColor = light ? "text-black" : "text-white";
152
+ const subtitleColor = light ? "text-neutral-500" : "text-neutral-400";
153
+ return /* @__PURE__ */ React3.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React3.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ React3.createElement("header", { className: `${headerLayoutWidth} ${headerBgStyle} backdrop-blur-md rounded-full py-2 px-6 flex items-center border transition-all duration-300` }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React3.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70" }, showLogo && /* @__PURE__ */ React3.createElement(
139
154
  Image,
140
155
  {
141
156
  src: logoSrc,
@@ -145,12 +160,13 @@ var Header = ({
145
160
  className: `object-contain w-5 h-auto ${invert ? "invert" : ""}`,
146
161
  priority: true
147
162
  }
148
- ), !hideHeaderText && /* @__PURE__ */ React3.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React3.createElement("span", { className: "text-[12px] text-white leading-none tracking-wide mb-1" }, companyName), subtitle && /* @__PURE__ */ React3.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest leading-none" }, subtitle)))), /* @__PURE__ */ React3.createElement("nav", { className: "flex items-center gap-1 md:gap-2" }, links.map((link, index) => /* @__PURE__ */ React3.createElement(
163
+ ), !hideHeaderText && /* @__PURE__ */ React3.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React3.createElement("span", { className: `text-[12px] leading-none tracking-wide mb-1 transition-colors ${titleColor}` }, companyName), subtitle && /* @__PURE__ */ React3.createElement("span", { className: `text-[9px] tracking-widest leading-none transition-colors ${subtitleColor}` }, subtitle)))), /* @__PURE__ */ React3.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React3.createElement(
149
164
  NavLink,
150
165
  {
151
166
  key: index,
152
167
  href: link.href,
153
- className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
168
+ className: link.hideOnMobile ? "hidden sm:inline-flex" : "",
169
+ light
154
170
  },
155
171
  link.label
156
172
  ))))));
@@ -227,7 +243,7 @@ var HeroSection = ({
227
243
  {
228
244
  className: "absolute inset-0 w-full h-full pointer-events-none z-0",
229
245
  style: {
230
- background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, #ffffff 100%)`
246
+ background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, transparent 100%)`
231
247
  }
232
248
  }
233
249
  ), /* @__PURE__ */ React5.createElement(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",
@@ -39,6 +39,7 @@
39
39
  "dependencies": {
40
40
  "@hugeicons/core-free-icons": "^1.1.0",
41
41
  "@hugeicons/react": "^1.1.1",
42
+ "@retinalabsllc/zairusjs": "^0.1.5",
42
43
  "clsx": "^2.1.1",
43
44
  "react-hot-toast": "^2.6.0",
44
45
  "tailwind-merge": "^3.6.0",
@@ -60,4 +61,4 @@
60
61
  "overrides": {
61
62
  "postcss": "^8.5.15"
62
63
  }
63
- }
64
+ }