npm - @farihatang/react-ui - Versions diffs - 0.1.0-beta.1 → 0.1.0-beta.2 - Mend

@farihatang/react-ui 0.1.0-beta.1 → 0.1.0-beta.2

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

package/dist/index.js CHANGED Viewed

@@ -140,33 +140,64 @@ var DEFAULT_LINKS = [
   { label: "Contact", href: "#contact" }
 ];
 var tokens = {
-  dark: {
+  light: {
     nav: {
-      base: "bg-transparent",
-      scrolled: "bg-[#060912]/80 backdrop-blur-md border-b border-white/5"
+      baseStyle: { background: "transparent" },
+      scrolledStyle: { background: "rgba(248,247,244,0.90)" },
+      scrolledClass: "backdrop-blur-md shadow-sm"
+    },
+    logo: { color: "#0f0f0f" },
+    logoAccent: { color: "#5b50f0" },
+    link: "text-gray-500 hover:bg-black/5 hover:text-gray-900 font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200",
+    cta: {
+      className: "text-white shadow-lg hover:scale-[1.03] transition-all duration-200",
+      style: {
+        background: "linear-gradient(135deg, #5b50f0, #7c3aed)",
+        boxShadow: "0 4px 14px rgba(91,80,240,0.35)"
+      }
     },
-    logo: "text-[#6366f1]",
-    logoAccent: "text-white/20",
-    link: "text-[#64748b] hover:text-[#e2e8f0]",
-    cta: "bg-[#6366f1]/10 border border-[#6366f1]/30 text-[#6366f1] hover:bg-[#6366f1] hover:text-white hover:border-[#6366f1]",
-    menuToggle: "text-[#64748b] hover:text-[#e2e8f0]",
-    mobileMenu: "bg-[#060912]/95 backdrop-blur-md border-t border-white/5",
-    mobileLink: "text-[#64748b] hover:text-[#e2e8f0]",
-    mobileCta: "bg-[#6366f1]/10 border border-[#6366f1]/30 text-[#6366f1]"
+    menuToggle: "text-gray-500 hover:text-gray-900",
+    mobileMenu: {
+      className: "backdrop-blur-md border-t border-black/5",
+      style: { background: "rgba(248,247,244,0.95)" }
+    },
+    mobileLink: "text-gray-500 hover:text-gray-900 font-sans font-medium text-base transition-colors",
+    mobileCta: {
+      className: "text-white font-sans font-bold text-sm",
+      style: { background: "linear-gradient(135deg, #5b50f0, #7c3aed)" }
+    }
   },
-  light: {
+  dark: {
     nav: {
-      base: "bg-transparent",
-      scrolled: "bg-[#f8f7f4]/90 backdrop-blur-md shadow-sm"
+      baseStyle: { background: "transparent" },
+      scrolledStyle: { background: "rgba(6,9,18,0.80)" },
+      scrolledClass: "backdrop-blur-md border-b border-white/5"
+    },
+    logo: { color: "#6366f1" },
+    logoAccent: { color: "rgba(255,255,255,0.20)" },
+    link: "text-slate-500 hover:text-slate-100 font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200",
+    cta: {
+      className: "border transition-all duration-200 hover:text-white",
+      style: {
+        background: "rgba(99,102,241,0.10)",
+        borderColor: "rgba(99,102,241,0.30)",
+        color: "#6366f1"
+      }
+    },
+    menuToggle: "text-slate-500 hover:text-slate-100",
+    mobileMenu: {
+      className: "backdrop-blur-md border-t border-white/5",
+      style: { background: "rgba(6,9,18,0.95)" }
     },
-    logo: "text-[#0f0f0f]",
-    logoAccent: "text-[#5b50f0]",
-    link: "text-[#6b7280] hover:bg-black/5 hover:text-[#0f0f0f]",
-    cta: "[background:linear-gradient(135deg,#5b50f0,#7c3aed)] text-white shadow-lg shadow-[#5b50f0]/25 hover:shadow-[#5b50f0]/40 hover:scale-[1.03]",
-    menuToggle: "text-[#6b7280] hover:text-[#0f0f0f]",
-    mobileMenu: "bg-[#f8f7f4]/95 backdrop-blur-md border-t border-black/5",
-    mobileLink: "text-[#6b7280] hover:text-[#0f0f0f]",
-    mobileCta: "[background:linear-gradient(135deg,#5b50f0,#7c3aed)] text-white"
+    mobileLink: "text-slate-500 hover:text-slate-100 font-sans font-medium text-base transition-colors",
+    mobileCta: {
+      className: "border font-sans font-bold text-sm",
+      style: {
+        background: "rgba(99,102,241,0.10)",
+        borderColor: "rgba(99,102,241,0.30)",
+        color: "#6366f1"
+      }
+    }
   }
 };
 function NavBar({
@@ -188,81 +219,60 @@ function NavBar({
     window.addEventListener("scroll", handler, { passive: true });
     return () => window.removeEventListener("scroll", handler);
   }, [scrollEffect, scrollThreshold]);
-  const navPy = scrolled ? "py-3" : "py-5";
-  const navBg = scrolled ? t.nav.scrolled : t.nav.base;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "nav",
-    {
-      role: "navigation",
-      "aria-label": "Main navigation",
-      className: `fixed top-0 inset-x-0 z-50 transition-all duration-500 ${navPy} ${navBg}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-6 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("a", { href: "#", className: `font-sans font-extrabold text-lg tracking-tight ${t.logo}`, children: [
-            logo,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: t.logoAccent, children: logoAccent })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "hidden md:flex items-center gap-1", role: "list", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: link.href,
-              className: `font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200 ${t.link}`,
-              children: link.label
-            }
-          ) }, link.label)) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
+  const navStyle = scrolled ? __spreadProps(__spreadValues({}, t.nav.scrolledStyle), { transition: "all 0.5s ease" }) : __spreadProps(__spreadValues({}, t.nav.baseStyle), { transition: "all 0.5s ease" });
+  const navClass = `fixed top-0 inset-x-0 z-50 ${scrolled ? `py-3 ${t.nav.scrolledClass}` : "py-5"}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { role: "navigation", "aria-label": "Main navigation", className: navClass, style: navStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-6 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("a", { href: "#", className: "font-sans font-extrabold text-lg tracking-tight", style: t.logo, children: [
+        logo,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: t.logoAccent, children: logoAccent })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "hidden md:flex items-center gap-1", role: "list", children: links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, className: t.link, children: link.label }) }, link.label)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: ctaHref,
+          className: `hidden md:inline-flex items-center px-5 py-2.5 rounded-full ${t.cta.className}`,
+          style: t.cta.style,
+          children: ctaLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: `md:hidden transition-colors ${t.menuToggle}`,
+          onClick: () => setMenuOpen((prev) => !prev),
+          "aria-expanded": menuOpen,
+          "aria-label": menuOpen ? "Close menu" : "Open menu",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
             {
-              href: ctaHref,
-              className: `hidden md:inline-flex items-center px-5 py-2.5 rounded-full font-sans font-bold text-sm transition-all duration-200 ${t.cta}`,
-              children: ctaLabel
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: `md:hidden transition-colors ${t.menuToggle}`,
-              onClick: () => setMenuOpen((prev) => !prev),
-              "aria-expanded": menuOpen,
-              "aria-label": menuOpen ? "Close menu" : "Open menu",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  width: "22",
-                  height: "22",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  children: menuOpen ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12h18M3 6h18M3 18h18" })
-                }
-              )
+              width: "22",
+              height: "22",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: menuOpen ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12h18M3 6h18M3 18h18" })
             }
           )
-        ] }),
-        menuOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `md:hidden mt-3 ${t.mobileMenu}`, children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "max-w-6xl mx-auto px-6 py-5 flex flex-col gap-4", role: "list", children: [
-          links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: link.href,
-              onClick: () => setMenuOpen(false),
-              className: `font-sans font-medium text-base transition-colors ${t.mobileLink}`,
-              children: link.label
-            }
-          ) }, link.label)),
-          /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: ctaHref,
-              onClick: () => setMenuOpen(false),
-              className: `inline-block px-5 py-2.5 rounded-full font-sans font-bold text-sm ${t.mobileCta}`,
-              children: ctaLabel
-            }
-          ) })
-        ] }) })
-      ]
-    }
-  );
+        }
+      )
+    ] }),
+    menuOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `md:hidden mt-3 ${t.mobileMenu.className}`, style: t.mobileMenu.style, children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "max-w-6xl mx-auto px-6 py-5 flex flex-col gap-4", role: "list", children: [
+      links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, onClick: () => setMenuOpen(false), className: t.mobileLink, children: link.label }) }, link.label)),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: ctaHref,
+          onClick: () => setMenuOpen(false),
+          className: `inline-block px-5 py-2.5 rounded-full ${t.mobileCta.className}`,
+          style: t.mobileCta.style,
+          children: ctaLabel
+        }
+      ) })
+    ] }) })
+  ] });
 }
 exports.Button = Button;

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/lib/cn.ts","../src/components/Button/Button.tsx","../src/components/NavBar/NavBar.tsx"],"names":["clsx","jsxs","jsx","React","useState","useEffect"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\nexport function cn(...inputs: ClassValue[]): string {\n return clsx(inputs);\n}\n","import React from 'react';\nimport { cn } from '@/lib/cn';\n\nexport type ButtonVariant = 'primary' \| 'secondary' \| 'ghost' \| 'danger';\nexport type ButtonSize = 'sm' \| 'md' \| 'lg';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Visual style variant /\n variant?: ButtonVariant;\n /* Size preset /\n size?: ButtonSize;\n /* Show loading spinner and disable interaction /\n loading?: boolean;\n /* Icon rendered before label /\n leadingIcon?: React.ReactNode;\n /* Icon rendered after label /\n trailingIcon?: React.ReactNode;\n /* Stretch to fill container width /\n fullWidth?: boolean;\n}\n\nconst variantStyles: Record<ButtonVariant, string> = {\n primary: 'bg-brand text-white hover:bg-brand-600 active:bg-brand-700 shadow-sm',\n secondary: 'bg-surface-2 text-ink border border-surface-3 hover:bg-surface-3 active:bg-surface-3',\n ghost: 'bg-transparent text-ink-secondary hover:bg-surface-2 active:bg-surface-3',\n danger: 'bg-danger text-white hover:bg-red-600 active:bg-red-700 shadow-sm',\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n sm: 'h-8 px-3 text-xs gap-1.5 rounded',\n md: 'h-9 px-4 text-sm gap-2 rounded-md',\n lg: 'h-11 px-6 text-sm gap-2.5 rounded-lg',\n};\n\nfunction Spinner({ className }: { className?: string }) {\n return (\n <svg\n className={cn('animate-spin', className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n />\n </svg>\n );\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'md',\n loading = false,\n leadingIcon,\n trailingIcon,\n fullWidth = false,\n disabled,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const isDisabled = disabled \|\| loading;\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n aria-busy={loading}\n className={cn(\n 'inline-flex items-center justify-center font-sans font-medium',\n 'transition-all duration-150 ease-in-out',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1',\n 'disabled:opacity-50 disabled:pointer-events-none',\n 'select-none whitespace-nowrap',\n variantStyles[variant],\n sizeStyles[size],\n fullWidth && 'w-full',\n className\n )}\n {...props}\n >\n {loading ? (\n <Spinner\n className={cn(size === 'sm' ? 'h-3 w-3' : size === 'lg' ? 'h-4 w-4' : 'h-3.5 w-3.5')}\n />\n ) : (\n leadingIcon && (\n <span className=\"shrink-0\" aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )\n )}\n {children && <span>{children}</span>}\n {!loading && trailingIcon && (\n <span className=\"shrink-0\" aria-hidden=\"true\">\n {trailingIcon}\n </span>\n )}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n","'use client';\n\nimport { useState, useEffect } from 'react';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NavLink {\n label: string;\n href: string;\n}\n\nexport interface NavBarProps {\n /* Visual theme. \"dark\" = glass/blur on dark bg. \"light\" = white/shadow on light bg. /\n theme?: 'dark' \| 'light';\n /* Logo text displayed on the left. /\n logo?: string;\n /* Accent character appended to the logo (e.g. \".\"). /\n logoAccent?: string;\n /* Navigation links rendered in the centre. /\n links?: NavLink[];\n /* Label for the CTA button on the right. /\n ctaLabel?: string;\n /* href for the CTA button. /\n ctaHref?: string;\n /* Whether the nav background changes on scroll. /\n scrollEffect?: boolean;\n /* Scroll threshold in px before the effect triggers. Default 50. /\n scrollThreshold?: number;\n}\n\n// ─── Constants ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_LINKS: NavLink[] = [\n { label: 'About', href: '#about' },\n { label: 'Experience', href: '#experience' },\n { label: 'Projects', href: '#projects' },\n { label: 'Contact', href: '#contact' },\n];\n\n// ─── Theme tokens ─────────────────────────────────────────────────────────────\n\nconst tokens = {\n dark: {\n nav: {\n base: 'bg-transparent',\n scrolled: 'bg-[#060912]/80 backdrop-blur-md border-b border-white/5',\n },\n logo: 'text-[#6366f1]',\n logoAccent: 'text-white/20',\n link: 'text-[#64748b] hover:text-[#e2e8f0]',\n cta: 'bg-[#6366f1]/10 border border-[#6366f1]/30 text-[#6366f1] hover:bg-[#6366f1] hover:text-white hover:border-[#6366f1]',\n menuToggle: 'text-[#64748b] hover:text-[#e2e8f0]',\n mobileMenu: 'bg-[#060912]/95 backdrop-blur-md border-t border-white/5',\n mobileLink: 'text-[#64748b] hover:text-[#e2e8f0]',\n mobileCta: 'bg-[#6366f1]/10 border border-[#6366f1]/30 text-[#6366f1]',\n },\n light: {\n nav: {\n base: 'bg-transparent',\n scrolled: 'bg-[#f8f7f4]/90 backdrop-blur-md shadow-sm',\n },\n logo: 'text-[#0f0f0f]',\n logoAccent: 'text-[#5b50f0]',\n link: 'text-[#6b7280] hover:bg-black/5 hover:text-[#0f0f0f]',\n cta: '[background:linear-gradient(135deg,#5b50f0,#7c3aed)] text-white shadow-lg shadow-[#5b50f0]/25 hover:shadow-[#5b50f0]/40 hover:scale-[1.03]',\n menuToggle: 'text-[#6b7280] hover:text-[#0f0f0f]',\n mobileMenu: 'bg-[#f8f7f4]/95 backdrop-blur-md border-t border-black/5',\n mobileLink: 'text-[#6b7280] hover:text-[#0f0f0f]',\n mobileCta: '[background:linear-gradient(135deg,#5b50f0,#7c3aed)] text-white',\n },\n} as const;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function NavBar({\n theme = 'light',\n logo = 'Fariha',\n logoAccent = '.',\n links = DEFAULT_LINKS,\n ctaLabel = 'Hire me',\n ctaHref = '#contact',\n scrollEffect = true,\n scrollThreshold = 50,\n}: NavBarProps) {\n const [scrolled, setScrolled] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const t = tokens[theme];\n\n useEffect(() => {\n if (!scrollEffect) return;\n const handler = () => setScrolled(window.scrollY > scrollThreshold);\n window.addEventListener('scroll', handler, { passive: true });\n return () => window.removeEventListener('scroll', handler);\n }, [scrollEffect, scrollThreshold]);\n\n const navPy = scrolled ? 'py-3' : 'py-5';\n const navBg = scrolled ? t.nav.scrolled : t.nav.base;\n\n return (\n <nav\n role=\"navigation\"\n aria-label=\"Main navigation\"\n className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${navPy} ${navBg}`}\n >\n <div className=\"max-w-6xl mx-auto px-6 flex items-center justify-between\">\n {/ Logo /}\n <a href=\"#\" className={`font-sans font-extrabold text-lg tracking-tight ${t.logo}`}>\n {logo}\n <span className={t.logoAccent}>{logoAccent}</span>\n </a>\n\n {/ Desktop links /}\n <ul className=\"hidden md:flex items-center gap-1\" role=\"list\">\n {links.map(link => (\n <li key={link.label}>\n <a\n href={link.href}\n className={`font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200 ${t.link}`}\n >\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n\n {/ Desktop CTA /}\n <a\n href={ctaHref}\n className={`hidden md:inline-flex items-center px-5 py-2.5 rounded-full font-sans font-bold text-sm transition-all duration-200 ${t.cta}`}\n >\n {ctaLabel}\n </a>\n\n {/ Mobile toggle /}\n <button\n className={`md:hidden transition-colors ${t.menuToggle}`}\n onClick={() => setMenuOpen(prev => !prev)}\n aria-expanded={menuOpen}\n aria-label={menuOpen ? 'Close menu' : 'Open menu'}\n >\n <svg\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n {menuOpen ? <path d=\"M18 6L6 18M6 6l12 12\" /> : <path d=\"M3 12h18M3 6h18M3 18h18\" />}\n </svg>\n </button>\n </div>\n\n {/ Mobile menu */}\n {menuOpen && (\n <div className={`md:hidden mt-3 ${t.mobileMenu}`}>\n <ul className=\"max-w-6xl mx-auto px-6 py-5 flex flex-col gap-4\" role=\"list\">\n {links.map(link => (\n <li key={link.label}>\n <a\n href={link.href}\n onClick={() => setMenuOpen(false)}\n className={`font-sans font-medium text-base transition-colors ${t.mobileLink}`}\n >\n {link.label}\n </a>\n </li>\n ))}\n <li>\n <a\n href={ctaHref}\n onClick={() => setMenuOpen(false)}\n className={`inline-block px-5 py-2.5 rounded-full font-sans font-bold text-sm ${t.mobileCta}`}\n >\n {ctaLabel}\n </a>\n </li>\n </ul>\n </div>\n )}\n </nav>\n );\n}\n\nexport default NavBar;\n"]}
1	+ {"version":3,"sources":["../src/lib/cn.ts","../src/components/Button/Button.tsx","../src/components/NavBar/NavBar.tsx"],"names":["clsx","jsxs","jsx","React","useState","useEffect"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\nexport function cn(...inputs: ClassValue[]): string {\n return clsx(inputs);\n}\n","import React from 'react';\nimport { cn } from '@/lib/cn';\n\nexport type ButtonVariant = 'primary' \| 'secondary' \| 'ghost' \| 'danger';\nexport type ButtonSize = 'sm' \| 'md' \| 'lg';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Visual style variant /\n variant?: ButtonVariant;\n /* Size preset /\n size?: ButtonSize;\n /* Show loading spinner and disable interaction /\n loading?: boolean;\n /* Icon rendered before label /\n leadingIcon?: React.ReactNode;\n /* Icon rendered after label /\n trailingIcon?: React.ReactNode;\n /* Stretch to fill container width /\n fullWidth?: boolean;\n}\n\nconst variantStyles: Record<ButtonVariant, string> = {\n primary: 'bg-brand text-white hover:bg-brand-600 active:bg-brand-700 shadow-sm',\n secondary: 'bg-surface-2 text-ink border border-surface-3 hover:bg-surface-3 active:bg-surface-3',\n ghost: 'bg-transparent text-ink-secondary hover:bg-surface-2 active:bg-surface-3',\n danger: 'bg-danger text-white hover:bg-red-600 active:bg-red-700 shadow-sm',\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n sm: 'h-8 px-3 text-xs gap-1.5 rounded',\n md: 'h-9 px-4 text-sm gap-2 rounded-md',\n lg: 'h-11 px-6 text-sm gap-2.5 rounded-lg',\n};\n\nfunction Spinner({ className }: { className?: string }) {\n return (\n <svg\n className={cn('animate-spin', className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n />\n </svg>\n );\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'md',\n loading = false,\n leadingIcon,\n trailingIcon,\n fullWidth = false,\n disabled,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const isDisabled = disabled \|\| loading;\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n aria-busy={loading}\n className={cn(\n 'inline-flex items-center justify-center font-sans font-medium',\n 'transition-all duration-150 ease-in-out',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1',\n 'disabled:opacity-50 disabled:pointer-events-none',\n 'select-none whitespace-nowrap',\n variantStyles[variant],\n sizeStyles[size],\n fullWidth && 'w-full',\n className\n )}\n {...props}\n >\n {loading ? (\n <Spinner\n className={cn(size === 'sm' ? 'h-3 w-3' : size === 'lg' ? 'h-4 w-4' : 'h-3.5 w-3.5')}\n />\n ) : (\n leadingIcon && (\n <span className=\"shrink-0\" aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )\n )}\n {children && <span>{children}</span>}\n {!loading && trailingIcon && (\n <span className=\"shrink-0\" aria-hidden=\"true\">\n {trailingIcon}\n </span>\n )}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n","'use client';\n\nimport { useState, useEffect, CSSProperties } from 'react';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NavLink {\n label: string;\n href: string;\n}\n\nexport interface NavBarProps {\n /* Visual theme. \"dark\" = glass/blur on dark bg. \"light\" = white/shadow on light bg. /\n theme?: 'dark' \| 'light';\n /* Logo text displayed on the left. /\n logo?: string;\n /* Accent character appended to the logo (e.g. \".\"). /\n logoAccent?: string;\n /* Navigation links rendered in the centre. /\n links?: NavLink[];\n /* Label for the CTA button on the right. /\n ctaLabel?: string;\n /* href for the CTA button. /\n ctaHref?: string;\n /* Whether the nav background changes on scroll. /\n scrollEffect?: boolean;\n /* Scroll threshold in px before the effect triggers. Default 50. /\n scrollThreshold?: number;\n}\n\n// ─── Constants ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_LINKS: NavLink[] = [\n { label: 'About', href: '#about' },\n { label: 'Experience', href: '#experience' },\n { label: 'Projects', href: '#projects' },\n { label: 'Contact', href: '#contact' },\n];\n\n// ─── Theme tokens ─────────────────────────────────────────────────────────────\n//\n// Rule: className strings must only use standard Tailwind utilities.\n// Any value that contains a custom color or arbitrary CSS goes into\n// the companion `Style` field as a CSSProperties object, applied via\n// the `style` prop. This ensures the component works in any project\n// regardless of whether that project's Tailwind config has seen these\n// class names during its own build scan.\n\ninterface ThemeTokens {\n nav: {\n baseStyle: CSSProperties;\n scrolledStyle: CSSProperties;\n scrolledClass: string;\n };\n logo: { color: string };\n logoAccent: { color: string };\n link: string;\n cta: {\n className: string;\n style: CSSProperties;\n hoverStyle?: CSSProperties;\n };\n menuToggle: string;\n mobileMenu: {\n className: string;\n style: CSSProperties;\n };\n mobileLink: string;\n mobileCta: {\n className: string;\n style: CSSProperties;\n };\n}\n\nconst tokens: Record<'light' \| 'dark', ThemeTokens> = {\n light: {\n nav: {\n baseStyle: { background: 'transparent' },\n scrolledStyle: { background: 'rgba(248,247,244,0.90)' },\n scrolledClass: 'backdrop-blur-md shadow-sm',\n },\n logo: { color: '#0f0f0f' },\n logoAccent: { color: '#5b50f0' },\n link: 'text-gray-500 hover:bg-black/5 hover:text-gray-900 font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200',\n cta: {\n className: 'text-white shadow-lg hover:scale-[1.03] transition-all duration-200',\n style: {\n background: 'linear-gradient(135deg, #5b50f0, #7c3aed)',\n boxShadow: '0 4px 14px rgba(91,80,240,0.35)',\n },\n },\n menuToggle: 'text-gray-500 hover:text-gray-900',\n mobileMenu: {\n className: 'backdrop-blur-md border-t border-black/5',\n style: { background: 'rgba(248,247,244,0.95)' },\n },\n mobileLink:\n 'text-gray-500 hover:text-gray-900 font-sans font-medium text-base transition-colors',\n mobileCta: {\n className: 'text-white font-sans font-bold text-sm',\n style: { background: 'linear-gradient(135deg, #5b50f0, #7c3aed)' },\n },\n },\n\n dark: {\n nav: {\n baseStyle: { background: 'transparent' },\n scrolledStyle: { background: 'rgba(6,9,18,0.80)' },\n scrolledClass: 'backdrop-blur-md border-b border-white/5',\n },\n logo: { color: '#6366f1' },\n logoAccent: { color: 'rgba(255,255,255,0.20)' },\n link: 'text-slate-500 hover:text-slate-100 font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200',\n cta: {\n className: 'border transition-all duration-200 hover:text-white',\n style: {\n background: 'rgba(99,102,241,0.10)',\n borderColor: 'rgba(99,102,241,0.30)',\n color: '#6366f1',\n },\n },\n menuToggle: 'text-slate-500 hover:text-slate-100',\n mobileMenu: {\n className: 'backdrop-blur-md border-t border-white/5',\n style: { background: 'rgba(6,9,18,0.95)' },\n },\n mobileLink:\n 'text-slate-500 hover:text-slate-100 font-sans font-medium text-base transition-colors',\n mobileCta: {\n className: 'border font-sans font-bold text-sm',\n style: {\n background: 'rgba(99,102,241,0.10)',\n borderColor: 'rgba(99,102,241,0.30)',\n color: '#6366f1',\n },\n },\n },\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function NavBar({\n theme = 'light',\n logo = 'Fariha',\n logoAccent = '.',\n links = DEFAULT_LINKS,\n ctaLabel = 'Hire me',\n ctaHref = '#contact',\n scrollEffect = true,\n scrollThreshold = 50,\n}: NavBarProps) {\n const [scrolled, setScrolled] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const t = tokens[theme];\n\n useEffect(() => {\n if (!scrollEffect) return;\n const handler = () => setScrolled(window.scrollY > scrollThreshold);\n window.addEventListener('scroll', handler, { passive: true });\n return () => window.removeEventListener('scroll', handler);\n }, [scrollEffect, scrollThreshold]);\n\n const navStyle: CSSProperties = scrolled\n ? { ...t.nav.scrolledStyle, transition: 'all 0.5s ease' }\n : { ...t.nav.baseStyle, transition: 'all 0.5s ease' };\n\n const navClass = `fixed top-0 inset-x-0 z-50 ${scrolled ? `py-3 ${t.nav.scrolledClass}` : 'py-5'}`;\n\n return (\n <nav role=\"navigation\" aria-label=\"Main navigation\" className={navClass} style={navStyle}>\n <div className=\"max-w-6xl mx-auto px-6 flex items-center justify-between\">\n {/* Logo /}\n <a href=\"#\" className=\"font-sans font-extrabold text-lg tracking-tight\" style={t.logo}>\n {logo}\n <span style={t.logoAccent}>{logoAccent}</span>\n </a>\n\n {/ Desktop links /}\n <ul className=\"hidden md:flex items-center gap-1\" role=\"list\">\n {links.map(link => (\n <li key={link.label}>\n <a href={link.href} className={t.link}>\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n\n {/ Desktop CTA /}\n <a\n href={ctaHref}\n className={`hidden md:inline-flex items-center px-5 py-2.5 rounded-full ${t.cta.className}`}\n style={t.cta.style}\n >\n {ctaLabel}\n </a>\n\n {/ Mobile toggle /}\n <button\n className={`md:hidden transition-colors ${t.menuToggle}`}\n onClick={() => setMenuOpen(prev => !prev)}\n aria-expanded={menuOpen}\n aria-label={menuOpen ? 'Close menu' : 'Open menu'}\n >\n <svg\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n {menuOpen ? <path d=\"M18 6L6 18M6 6l12 12\" /> : <path d=\"M3 12h18M3 6h18M3 18h18\" />}\n </svg>\n </button>\n </div>\n\n {/ Mobile menu */}\n {menuOpen && (\n <div className={`md:hidden mt-3 ${t.mobileMenu.className}`} style={t.mobileMenu.style}>\n <ul className=\"max-w-6xl mx-auto px-6 py-5 flex flex-col gap-4\" role=\"list\">\n {links.map(link => (\n <li key={link.label}>\n <a href={link.href} onClick={() => setMenuOpen(false)} className={t.mobileLink}>\n {link.label}\n </a>\n </li>\n ))}\n <li>\n <a\n href={ctaHref}\n onClick={() => setMenuOpen(false)}\n className={`inline-block px-5 py-2.5 rounded-full ${t.mobileCta.className}`}\n style={t.mobileCta.style}\n >\n {ctaLabel}\n </a>\n </li>\n </ul>\n </div>\n )}\n </nav>\n );\n}\n\nexport default NavBar;\n"]}

package/dist/index.mjs CHANGED Viewed

@@ -134,33 +134,64 @@ var DEFAULT_LINKS = [
   { label: "Contact", href: "#contact" }
 ];
 var tokens = {
-  dark: {
+  light: {
     nav: {
-      base: "bg-transparent",
-      scrolled: "bg-[#060912]/80 backdrop-blur-md border-b border-white/5"
+      baseStyle: { background: "transparent" },
+      scrolledStyle: { background: "rgba(248,247,244,0.90)" },
+      scrolledClass: "backdrop-blur-md shadow-sm"
+    },
+    logo: { color: "#0f0f0f" },
+    logoAccent: { color: "#5b50f0" },
+    link: "text-gray-500 hover:bg-black/5 hover:text-gray-900 font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200",
+    cta: {
+      className: "text-white shadow-lg hover:scale-[1.03] transition-all duration-200",
+      style: {
+        background: "linear-gradient(135deg, #5b50f0, #7c3aed)",
+        boxShadow: "0 4px 14px rgba(91,80,240,0.35)"
+      }
     },
-    logo: "text-[#6366f1]",
-    logoAccent: "text-white/20",
-    link: "text-[#64748b] hover:text-[#e2e8f0]",
-    cta: "bg-[#6366f1]/10 border border-[#6366f1]/30 text-[#6366f1] hover:bg-[#6366f1] hover:text-white hover:border-[#6366f1]",
-    menuToggle: "text-[#64748b] hover:text-[#e2e8f0]",
-    mobileMenu: "bg-[#060912]/95 backdrop-blur-md border-t border-white/5",
-    mobileLink: "text-[#64748b] hover:text-[#e2e8f0]",
-    mobileCta: "bg-[#6366f1]/10 border border-[#6366f1]/30 text-[#6366f1]"
+    menuToggle: "text-gray-500 hover:text-gray-900",
+    mobileMenu: {
+      className: "backdrop-blur-md border-t border-black/5",
+      style: { background: "rgba(248,247,244,0.95)" }
+    },
+    mobileLink: "text-gray-500 hover:text-gray-900 font-sans font-medium text-base transition-colors",
+    mobileCta: {
+      className: "text-white font-sans font-bold text-sm",
+      style: { background: "linear-gradient(135deg, #5b50f0, #7c3aed)" }
+    }
   },
-  light: {
+  dark: {
     nav: {
-      base: "bg-transparent",
-      scrolled: "bg-[#f8f7f4]/90 backdrop-blur-md shadow-sm"
+      baseStyle: { background: "transparent" },
+      scrolledStyle: { background: "rgba(6,9,18,0.80)" },
+      scrolledClass: "backdrop-blur-md border-b border-white/5"
+    },
+    logo: { color: "#6366f1" },
+    logoAccent: { color: "rgba(255,255,255,0.20)" },
+    link: "text-slate-500 hover:text-slate-100 font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200",
+    cta: {
+      className: "border transition-all duration-200 hover:text-white",
+      style: {
+        background: "rgba(99,102,241,0.10)",
+        borderColor: "rgba(99,102,241,0.30)",
+        color: "#6366f1"
+      }
+    },
+    menuToggle: "text-slate-500 hover:text-slate-100",
+    mobileMenu: {
+      className: "backdrop-blur-md border-t border-white/5",
+      style: { background: "rgba(6,9,18,0.95)" }
     },
-    logo: "text-[#0f0f0f]",
-    logoAccent: "text-[#5b50f0]",
-    link: "text-[#6b7280] hover:bg-black/5 hover:text-[#0f0f0f]",
-    cta: "[background:linear-gradient(135deg,#5b50f0,#7c3aed)] text-white shadow-lg shadow-[#5b50f0]/25 hover:shadow-[#5b50f0]/40 hover:scale-[1.03]",
-    menuToggle: "text-[#6b7280] hover:text-[#0f0f0f]",
-    mobileMenu: "bg-[#f8f7f4]/95 backdrop-blur-md border-t border-black/5",
-    mobileLink: "text-[#6b7280] hover:text-[#0f0f0f]",
-    mobileCta: "[background:linear-gradient(135deg,#5b50f0,#7c3aed)] text-white"
+    mobileLink: "text-slate-500 hover:text-slate-100 font-sans font-medium text-base transition-colors",
+    mobileCta: {
+      className: "border font-sans font-bold text-sm",
+      style: {
+        background: "rgba(99,102,241,0.10)",
+        borderColor: "rgba(99,102,241,0.30)",
+        color: "#6366f1"
+      }
+    }
   }
 };
 function NavBar({
@@ -182,81 +213,60 @@ function NavBar({
     window.addEventListener("scroll", handler, { passive: true });
     return () => window.removeEventListener("scroll", handler);
   }, [scrollEffect, scrollThreshold]);
-  const navPy = scrolled ? "py-3" : "py-5";
-  const navBg = scrolled ? t.nav.scrolled : t.nav.base;
-  return /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      role: "navigation",
-      "aria-label": "Main navigation",
-      className: `fixed top-0 inset-x-0 z-50 transition-all duration-500 ${navPy} ${navBg}`,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-6 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("a", { href: "#", className: `font-sans font-extrabold text-lg tracking-tight ${t.logo}`, children: [
-            logo,
-            /* @__PURE__ */ jsx("span", { className: t.logoAccent, children: logoAccent })
-          ] }),
-          /* @__PURE__ */ jsx("ul", { className: "hidden md:flex items-center gap-1", role: "list", children: links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: link.href,
-              className: `font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200 ${t.link}`,
-              children: link.label
-            }
-          ) }, link.label)) }),
-          /* @__PURE__ */ jsx(
-            "a",
+  const navStyle = scrolled ? __spreadProps(__spreadValues({}, t.nav.scrolledStyle), { transition: "all 0.5s ease" }) : __spreadProps(__spreadValues({}, t.nav.baseStyle), { transition: "all 0.5s ease" });
+  const navClass = `fixed top-0 inset-x-0 z-50 ${scrolled ? `py-3 ${t.nav.scrolledClass}` : "py-5"}`;
+  return /* @__PURE__ */ jsxs("nav", { role: "navigation", "aria-label": "Main navigation", className: navClass, style: navStyle, children: [
+    /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-6 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("a", { href: "#", className: "font-sans font-extrabold text-lg tracking-tight", style: t.logo, children: [
+        logo,
+        /* @__PURE__ */ jsx("span", { style: t.logoAccent, children: logoAccent })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "hidden md:flex items-center gap-1", role: "list", children: links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, className: t.link, children: link.label }) }, link.label)) }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: ctaHref,
+          className: `hidden md:inline-flex items-center px-5 py-2.5 rounded-full ${t.cta.className}`,
+          style: t.cta.style,
+          children: ctaLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `md:hidden transition-colors ${t.menuToggle}`,
+          onClick: () => setMenuOpen((prev) => !prev),
+          "aria-expanded": menuOpen,
+          "aria-label": menuOpen ? "Close menu" : "Open menu",
+          children: /* @__PURE__ */ jsx(
+            "svg",
             {
-              href: ctaHref,
-              className: `hidden md:inline-flex items-center px-5 py-2.5 rounded-full font-sans font-bold text-sm transition-all duration-200 ${t.cta}`,
-              children: ctaLabel
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: `md:hidden transition-colors ${t.menuToggle}`,
-              onClick: () => setMenuOpen((prev) => !prev),
-              "aria-expanded": menuOpen,
-              "aria-label": menuOpen ? "Close menu" : "Open menu",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "22",
-                  height: "22",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  children: menuOpen ? /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) : /* @__PURE__ */ jsx("path", { d: "M3 12h18M3 6h18M3 18h18" })
-                }
-              )
+              width: "22",
+              height: "22",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: menuOpen ? /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) : /* @__PURE__ */ jsx("path", { d: "M3 12h18M3 6h18M3 18h18" })
             }
           )
-        ] }),
-        menuOpen && /* @__PURE__ */ jsx("div", { className: `md:hidden mt-3 ${t.mobileMenu}`, children: /* @__PURE__ */ jsxs("ul", { className: "max-w-6xl mx-auto px-6 py-5 flex flex-col gap-4", role: "list", children: [
-          links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: link.href,
-              onClick: () => setMenuOpen(false),
-              className: `font-sans font-medium text-base transition-colors ${t.mobileLink}`,
-              children: link.label
-            }
-          ) }, link.label)),
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: ctaHref,
-              onClick: () => setMenuOpen(false),
-              className: `inline-block px-5 py-2.5 rounded-full font-sans font-bold text-sm ${t.mobileCta}`,
-              children: ctaLabel
-            }
-          ) })
-        ] }) })
-      ]
-    }
-  );
+        }
+      )
+    ] }),
+    menuOpen && /* @__PURE__ */ jsx("div", { className: `md:hidden mt-3 ${t.mobileMenu.className}`, style: t.mobileMenu.style, children: /* @__PURE__ */ jsxs("ul", { className: "max-w-6xl mx-auto px-6 py-5 flex flex-col gap-4", role: "list", children: [
+      links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, onClick: () => setMenuOpen(false), className: t.mobileLink, children: link.label }) }, link.label)),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: ctaHref,
+          onClick: () => setMenuOpen(false),
+          className: `inline-block px-5 py-2.5 rounded-full ${t.mobileCta.className}`,
+          style: t.mobileCta.style,
+          children: ctaLabel
+        }
+      ) })
+    ] }) })
+  ] });
 }
 export { Button, NavBar, cn };

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/lib/cn.ts","../src/components/Button/Button.tsx","../src/components/NavBar/NavBar.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,KAAK,MAAM,CAAA;AACpB;ACiBA,IAAM,aAAA,GAA+C;AAAA,EACnD,OAAA,EAAS,sEAAA;AAAA,EACT,SAAA,EAAW,sFAAA;AAAA,EACX,KAAA,EAAO,0EAAA;AAAA,EACP,MAAA,EAAQ;AACV,CAAA;AAEA,IAAM,UAAA,GAAyC;AAAA,EAC7C,EAAA,EAAI,kCAAA;AAAA,EACJ,EAAA,EAAI,mCAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,OAAA,CAAQ,EAAE,SAAA,EAAU,EAA2B;AACtD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,SAAS,CAAA;AAAA,MACvC,KAAA,EAAM,4BAAA;AAAA,MACN,IAAA,EAAK,MAAA;AAAA,MACL,OAAA,EAAQ,WAAA;AAAA,MACR,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,YAAA,EAAa,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,IAAA,EAAK,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,CAAA;AAAA,wBAC5F,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,IAAA,EAAK,cAAA;AAAA,YACL,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AAAA,GACF;AAEJ;AAEO,IAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EAC1B,CACE,IAYA,GAAA,KACG;AAbH,IAAA,IAAA,EAAA,GAAA,EAAA,EACE;AAAA,MAAA,OAAA,GAAU,SAAA;AAAA,MACV,IAAA,GAAO,IAAA;AAAA,MACP,OAAA,GAAU,KAAA;AAAA,MACV,WAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA,GAAY,KAAA;AAAA,MACZ,QAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KAhEN,GAuDI,EAAA,EAUK,KAAA,GAAA,SAAA,CAVL,EAAA,EAUK;AAAA,MATH,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,MAAM,aAAa,QAAA,IAAY,OAAA;AAE/B,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA,aAAA,CAAA,cAAA,CAAA;AAAA,QACC,GAAA;AAAA,QACA,QAAA,EAAU,UAAA;AAAA,QACV,WAAA,EAAW,OAAA;AAAA,QACX,SAAA,EAAW,EAAA;AAAA,UACT,+DAAA;AAAA,UACA,yCAAA;AAAA,UACA,sGAAA;AAAA,UACA,kDAAA;AAAA,UACA,+BAAA;AAAA,UACA,cAAc,OAAO,CAAA;AAAA,UACrB,WAAW,IAAI,CAAA;AAAA,UACf,SAAA,IAAa,QAAA;AAAA,UACb;AAAA;AACF,OAAA,EACI,KAAA,CAAA,EAfL;AAAA,QAiBE,QAAA,EAAA;AAAA,UAAA,OAAA,mBACC,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,IAAA,KAAS,IAAA,GAAO,YAAY,IAAA,KAAS,IAAA,GAAO,YAAY,aAAa;AAAA;AAAA,WACrF,GAEA,+BACE,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,UAAA,EAAW,aAAA,EAAY,QACpC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGH,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAS,CAAA;AAAA,UAC5B,CAAC,WAAW,YAAA,oBACX,GAAA,CAAC,UAAK,SAAA,EAAU,UAAA,EAAW,aAAA,EAAY,MAAA,EACpC,QAAA,EAAA,YAAA,EACH;AAAA;AAAA,OAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AC/ErB,IAAM,aAAA,GAA2B;AAAA,EAC/B,EAAE,KAAA,EAAO,OAAA,EAAS,IAAA,EAAM,QAAA,EAAS;AAAA,EACjC,EAAE,KAAA,EAAO,YAAA,EAAc,IAAA,EAAM,aAAA,EAAc;AAAA,EAC3C,EAAE,KAAA,EAAO,UAAA,EAAY,IAAA,EAAM,WAAA,EAAY;AAAA,EACvC,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,UAAA;AAC5B,CAAA;AAIA,IAAM,MAAA,GAAS;AAAA,EACb,IAAA,EAAM;AAAA,IACJ,GAAA,EAAK;AAAA,MACH,IAAA,EAAM,gBAAA;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,IAAA,EAAM,gBAAA;AAAA,IACN,UAAA,EAAY,eAAA;AAAA,IACZ,IAAA,EAAM,qCAAA;AAAA,IACN,GAAA,EAAK,sHAAA;AAAA,IACL,UAAA,EAAY,qCAAA;AAAA,IACZ,UAAA,EAAY,0DAAA;AAAA,IACZ,UAAA,EAAY,qCAAA;AAAA,IACZ,SAAA,EAAW;AAAA,GACb;AAAA,EACA,KAAA,EAAO;AAAA,IACL,GAAA,EAAK;AAAA,MACH,IAAA,EAAM,gBAAA;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,IAAA,EAAM,gBAAA;AAAA,IACN,UAAA,EAAY,gBAAA;AAAA,IACZ,IAAA,EAAM,sDAAA;AAAA,IACN,GAAA,EAAK,4IAAA;AAAA,IACL,UAAA,EAAY,qCAAA;AAAA,IACZ,UAAA,EAAY,0DAAA;AAAA,IACZ,UAAA,EAAY,qCAAA;AAAA,IACZ,SAAA,EAAW;AAAA;AAEf,CAAA;AAIO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA,GAAQ,OAAA;AAAA,EACR,IAAA,GAAO,QAAA;AAAA,EACP,UAAA,GAAa,GAAA;AAAA,EACb,KAAA,GAAQ,aAAA;AAAA,EACR,QAAA,GAAW,SAAA;AAAA,EACX,OAAA,GAAU,UAAA;AAAA,EACV,YAAA,GAAe,IAAA;AAAA,EACf,eAAA,GAAkB;AACpB,CAAA,EAAgB;AACd,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,CAAA,GAAI,OAAO,KAAK,CAAA;AAEtB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,YAAA,EAAc;AACnB,IAAA,MAAM,OAAA,GAAU,MAAM,WAAA,CAAY,MAAA,CAAO,UAAU,eAAe,CAAA;AAClE,IAAA,MAAA,CAAO,iBAAiB,QAAA,EAAU,OAAA,EAAS,EAAE,OAAA,EAAS,MAAM,CAAA;AAC5D,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,QAAA,EAAU,OAAO,CAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,YAAA,EAAc,eAAe,CAAC,CAAA;AAElC,EAAA,MAAM,KAAA,GAAQ,WAAW,MAAA,GAAS,MAAA;AAClC,EAAA,MAAM,QAAQ,QAAA,GAAW,CAAA,CAAE,GAAA,CAAI,QAAA,GAAW,EAAE,GAAA,CAAI,IAAA;AAEhD,EAAA,uBACEA,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,YAAA;AAAA,MACL,YAAA,EAAW,iBAAA;AAAA,MACX,SAAA,EAAW,CAAA,uDAAA,EAA0D,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAAA,MAEnF,QAAA,EAAA;AAAA,wBAAAA,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0DAAA,EAEb,QAAA,EAAA;AAAA,0BAAAA,IAAAA,CAAC,OAAE,IAAA,EAAK,GAAA,EAAI,WAAW,CAAA,gDAAA,EAAmD,CAAA,CAAE,IAAI,CAAA,CAAA,EAC7E,QAAA,EAAA;AAAA,YAAA,IAAA;AAAA,4BACDC,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,CAAE,YAAa,QAAA,EAAA,UAAA,EAAW;AAAA,WAAA,EAC7C,CAAA;AAAA,0BAGAA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,mCAAA,EAAoC,IAAA,EAAK,MAAA,EACpD,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAA,IAAA,qBACTA,GAAAA,CAAC,QACC,QAAA,kBAAAA,GAAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,SAAA,EAAW,CAAA,iFAAA,EAAoF,CAAA,CAAE,IAAI,CAAA,CAAA;AAAA,cAEpG,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,WACR,EAAA,EANO,IAAA,CAAK,KAOd,CACD,CAAA,EACH,CAAA;AAAA,0BAGAA,GAAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,OAAA;AAAA,cACN,SAAA,EAAW,CAAA,oHAAA,EAAuH,CAAA,CAAE,GAAG,CAAA,CAAA;AAAA,cAEtI,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BAGAA,GAAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,CAAA,4BAAA,EAA+B,CAAA,CAAE,UAAU,CAAA,CAAA;AAAA,cACtD,OAAA,EAAS,MAAM,WAAA,CAAY,CAAA,IAAA,KAAQ,CAAC,IAAI,CAAA;AAAA,cACxC,eAAA,EAAe,QAAA;AAAA,cACf,YAAA,EAAY,WAAW,YAAA,GAAe,WAAA;AAAA,cAEtC,QAAA,kBAAAA,GAAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAM,IAAA;AAAA,kBACN,MAAA,EAAO,IAAA;AAAA,kBACP,OAAA,EAAQ,WAAA;AAAA,kBACR,IAAA,EAAK,MAAA;AAAA,kBACL,MAAA,EAAO,cAAA;AAAA,kBACP,WAAA,EAAY,GAAA;AAAA,kBAEX,QAAA,EAAA,QAAA,mBAAWA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAA,EAAuB,CAAA,mBAAKA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,yBAAA,EAA0B;AAAA;AAAA;AACpF;AAAA;AACF,SAAA,EACF,CAAA;AAAA,QAGC,QAAA,oBACCA,GAAAA,CAAC,KAAA,EAAA,EAAI,WAAW,CAAA,eAAA,EAAkB,CAAA,CAAE,UAAU,CAAA,CAAA,EAC5C,0BAAAD,IAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,iDAAA,EAAkD,MAAK,MAAA,EAClE,QAAA,EAAA;AAAA,UAAA,KAAA,CAAM,GAAA,CAAI,CAAA,IAAA,qBACTC,GAAAA,CAAC,QACC,QAAA,kBAAAA,GAAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,OAAA,EAAS,MAAM,WAAA,CAAY,KAAK,CAAA;AAAA,cAChC,SAAA,EAAW,CAAA,kDAAA,EAAqD,CAAA,CAAE,UAAU,CAAA,CAAA;AAAA,cAE3E,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,WACR,EAAA,EAPO,IAAA,CAAK,KAQd,CACD,CAAA;AAAA,0BACDA,GAAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAAA,GAAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,OAAA;AAAA,cACN,OAAA,EAAS,MAAM,WAAA,CAAY,KAAK,CAAA;AAAA,cAChC,SAAA,EAAW,CAAA,kEAAA,EAAqE,CAAA,CAAE,SAAS,CAAA,CAAA;AAAA,cAE1F,QAAA,EAAA;AAAA;AAAA,WACH,EACF;AAAA,SAAA,EACF,CAAA,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\nexport function cn(...inputs: ClassValue[]): string {\n return clsx(inputs);\n}\n","import React from 'react';\nimport { cn } from '@/lib/cn';\n\nexport type ButtonVariant = 'primary' \| 'secondary' \| 'ghost' \| 'danger';\nexport type ButtonSize = 'sm' \| 'md' \| 'lg';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Visual style variant /\n variant?: ButtonVariant;\n /* Size preset /\n size?: ButtonSize;\n /* Show loading spinner and disable interaction /\n loading?: boolean;\n /* Icon rendered before label /\n leadingIcon?: React.ReactNode;\n /* Icon rendered after label /\n trailingIcon?: React.ReactNode;\n /* Stretch to fill container width /\n fullWidth?: boolean;\n}\n\nconst variantStyles: Record<ButtonVariant, string> = {\n primary: 'bg-brand text-white hover:bg-brand-600 active:bg-brand-700 shadow-sm',\n secondary: 'bg-surface-2 text-ink border border-surface-3 hover:bg-surface-3 active:bg-surface-3',\n ghost: 'bg-transparent text-ink-secondary hover:bg-surface-2 active:bg-surface-3',\n danger: 'bg-danger text-white hover:bg-red-600 active:bg-red-700 shadow-sm',\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n sm: 'h-8 px-3 text-xs gap-1.5 rounded',\n md: 'h-9 px-4 text-sm gap-2 rounded-md',\n lg: 'h-11 px-6 text-sm gap-2.5 rounded-lg',\n};\n\nfunction Spinner({ className }: { className?: string }) {\n return (\n <svg\n className={cn('animate-spin', className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n />\n </svg>\n );\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'md',\n loading = false,\n leadingIcon,\n trailingIcon,\n fullWidth = false,\n disabled,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const isDisabled = disabled \|\| loading;\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n aria-busy={loading}\n className={cn(\n 'inline-flex items-center justify-center font-sans font-medium',\n 'transition-all duration-150 ease-in-out',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1',\n 'disabled:opacity-50 disabled:pointer-events-none',\n 'select-none whitespace-nowrap',\n variantStyles[variant],\n sizeStyles[size],\n fullWidth && 'w-full',\n className\n )}\n {...props}\n >\n {loading ? (\n <Spinner\n className={cn(size === 'sm' ? 'h-3 w-3' : size === 'lg' ? 'h-4 w-4' : 'h-3.5 w-3.5')}\n />\n ) : (\n leadingIcon && (\n <span className=\"shrink-0\" aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )\n )}\n {children && <span>{children}</span>}\n {!loading && trailingIcon && (\n <span className=\"shrink-0\" aria-hidden=\"true\">\n {trailingIcon}\n </span>\n )}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n","'use client';\n\nimport { useState, useEffect } from 'react';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NavLink {\n label: string;\n href: string;\n}\n\nexport interface NavBarProps {\n /* Visual theme. \"dark\" = glass/blur on dark bg. \"light\" = white/shadow on light bg. /\n theme?: 'dark' \| 'light';\n /* Logo text displayed on the left. /\n logo?: string;\n /* Accent character appended to the logo (e.g. \".\"). /\n logoAccent?: string;\n /* Navigation links rendered in the centre. /\n links?: NavLink[];\n /* Label for the CTA button on the right. /\n ctaLabel?: string;\n /* href for the CTA button. /\n ctaHref?: string;\n /* Whether the nav background changes on scroll. /\n scrollEffect?: boolean;\n /* Scroll threshold in px before the effect triggers. Default 50. /\n scrollThreshold?: number;\n}\n\n// ─── Constants ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_LINKS: NavLink[] = [\n { label: 'About', href: '#about' },\n { label: 'Experience', href: '#experience' },\n { label: 'Projects', href: '#projects' },\n { label: 'Contact', href: '#contact' },\n];\n\n// ─── Theme tokens ─────────────────────────────────────────────────────────────\n\nconst tokens = {\n dark: {\n nav: {\n base: 'bg-transparent',\n scrolled: 'bg-[#060912]/80 backdrop-blur-md border-b border-white/5',\n },\n logo: 'text-[#6366f1]',\n logoAccent: 'text-white/20',\n link: 'text-[#64748b] hover:text-[#e2e8f0]',\n cta: 'bg-[#6366f1]/10 border border-[#6366f1]/30 text-[#6366f1] hover:bg-[#6366f1] hover:text-white hover:border-[#6366f1]',\n menuToggle: 'text-[#64748b] hover:text-[#e2e8f0]',\n mobileMenu: 'bg-[#060912]/95 backdrop-blur-md border-t border-white/5',\n mobileLink: 'text-[#64748b] hover:text-[#e2e8f0]',\n mobileCta: 'bg-[#6366f1]/10 border border-[#6366f1]/30 text-[#6366f1]',\n },\n light: {\n nav: {\n base: 'bg-transparent',\n scrolled: 'bg-[#f8f7f4]/90 backdrop-blur-md shadow-sm',\n },\n logo: 'text-[#0f0f0f]',\n logoAccent: 'text-[#5b50f0]',\n link: 'text-[#6b7280] hover:bg-black/5 hover:text-[#0f0f0f]',\n cta: '[background:linear-gradient(135deg,#5b50f0,#7c3aed)] text-white shadow-lg shadow-[#5b50f0]/25 hover:shadow-[#5b50f0]/40 hover:scale-[1.03]',\n menuToggle: 'text-[#6b7280] hover:text-[#0f0f0f]',\n mobileMenu: 'bg-[#f8f7f4]/95 backdrop-blur-md border-t border-black/5',\n mobileLink: 'text-[#6b7280] hover:text-[#0f0f0f]',\n mobileCta: '[background:linear-gradient(135deg,#5b50f0,#7c3aed)] text-white',\n },\n} as const;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function NavBar({\n theme = 'light',\n logo = 'Fariha',\n logoAccent = '.',\n links = DEFAULT_LINKS,\n ctaLabel = 'Hire me',\n ctaHref = '#contact',\n scrollEffect = true,\n scrollThreshold = 50,\n}: NavBarProps) {\n const [scrolled, setScrolled] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const t = tokens[theme];\n\n useEffect(() => {\n if (!scrollEffect) return;\n const handler = () => setScrolled(window.scrollY > scrollThreshold);\n window.addEventListener('scroll', handler, { passive: true });\n return () => window.removeEventListener('scroll', handler);\n }, [scrollEffect, scrollThreshold]);\n\n const navPy = scrolled ? 'py-3' : 'py-5';\n const navBg = scrolled ? t.nav.scrolled : t.nav.base;\n\n return (\n <nav\n role=\"navigation\"\n aria-label=\"Main navigation\"\n className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${navPy} ${navBg}`}\n >\n <div className=\"max-w-6xl mx-auto px-6 flex items-center justify-between\">\n {/ Logo /}\n <a href=\"#\" className={`font-sans font-extrabold text-lg tracking-tight ${t.logo}`}>\n {logo}\n <span className={t.logoAccent}>{logoAccent}</span>\n </a>\n\n {/ Desktop links /}\n <ul className=\"hidden md:flex items-center gap-1\" role=\"list\">\n {links.map(link => (\n <li key={link.label}>\n <a\n href={link.href}\n className={`font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200 ${t.link}`}\n >\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n\n {/ Desktop CTA /}\n <a\n href={ctaHref}\n className={`hidden md:inline-flex items-center px-5 py-2.5 rounded-full font-sans font-bold text-sm transition-all duration-200 ${t.cta}`}\n >\n {ctaLabel}\n </a>\n\n {/ Mobile toggle /}\n <button\n className={`md:hidden transition-colors ${t.menuToggle}`}\n onClick={() => setMenuOpen(prev => !prev)}\n aria-expanded={menuOpen}\n aria-label={menuOpen ? 'Close menu' : 'Open menu'}\n >\n <svg\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n {menuOpen ? <path d=\"M18 6L6 18M6 6l12 12\" /> : <path d=\"M3 12h18M3 6h18M3 18h18\" />}\n </svg>\n </button>\n </div>\n\n {/ Mobile menu */}\n {menuOpen && (\n <div className={`md:hidden mt-3 ${t.mobileMenu}`}>\n <ul className=\"max-w-6xl mx-auto px-6 py-5 flex flex-col gap-4\" role=\"list\">\n {links.map(link => (\n <li key={link.label}>\n <a\n href={link.href}\n onClick={() => setMenuOpen(false)}\n className={`font-sans font-medium text-base transition-colors ${t.mobileLink}`}\n >\n {link.label}\n </a>\n </li>\n ))}\n <li>\n <a\n href={ctaHref}\n onClick={() => setMenuOpen(false)}\n className={`inline-block px-5 py-2.5 rounded-full font-sans font-bold text-sm ${t.mobileCta}`}\n >\n {ctaLabel}\n </a>\n </li>\n </ul>\n </div>\n )}\n </nav>\n );\n}\n\nexport default NavBar;\n"]}
1	+ {"version":3,"sources":["../src/lib/cn.ts","../src/components/Button/Button.tsx","../src/components/NavBar/NavBar.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\n\nexport function cn(...inputs: ClassValue[]): string {\n return clsx(inputs);\n}\n","import React from 'react';\nimport { cn } from '@/lib/cn';\n\nexport type ButtonVariant = 'primary' \| 'secondary' \| 'ghost' \| 'danger';\nexport type ButtonSize = 'sm' \| 'md' \| 'lg';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Visual style variant /\n variant?: ButtonVariant;\n /* Size preset /\n size?: ButtonSize;\n /* Show loading spinner and disable interaction /\n loading?: boolean;\n /* Icon rendered before label /\n leadingIcon?: React.ReactNode;\n /* Icon rendered after label /\n trailingIcon?: React.ReactNode;\n /* Stretch to fill container width /\n fullWidth?: boolean;\n}\n\nconst variantStyles: Record<ButtonVariant, string> = {\n primary: 'bg-brand text-white hover:bg-brand-600 active:bg-brand-700 shadow-sm',\n secondary: 'bg-surface-2 text-ink border border-surface-3 hover:bg-surface-3 active:bg-surface-3',\n ghost: 'bg-transparent text-ink-secondary hover:bg-surface-2 active:bg-surface-3',\n danger: 'bg-danger text-white hover:bg-red-600 active:bg-red-700 shadow-sm',\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n sm: 'h-8 px-3 text-xs gap-1.5 rounded',\n md: 'h-9 px-4 text-sm gap-2 rounded-md',\n lg: 'h-11 px-6 text-sm gap-2.5 rounded-lg',\n};\n\nfunction Spinner({ className }: { className?: string }) {\n return (\n <svg\n className={cn('animate-spin', className)}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n />\n </svg>\n );\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'md',\n loading = false,\n leadingIcon,\n trailingIcon,\n fullWidth = false,\n disabled,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const isDisabled = disabled \|\| loading;\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n aria-busy={loading}\n className={cn(\n 'inline-flex items-center justify-center font-sans font-medium',\n 'transition-all duration-150 ease-in-out',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1',\n 'disabled:opacity-50 disabled:pointer-events-none',\n 'select-none whitespace-nowrap',\n variantStyles[variant],\n sizeStyles[size],\n fullWidth && 'w-full',\n className\n )}\n {...props}\n >\n {loading ? (\n <Spinner\n className={cn(size === 'sm' ? 'h-3 w-3' : size === 'lg' ? 'h-4 w-4' : 'h-3.5 w-3.5')}\n />\n ) : (\n leadingIcon && (\n <span className=\"shrink-0\" aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )\n )}\n {children && <span>{children}</span>}\n {!loading && trailingIcon && (\n <span className=\"shrink-0\" aria-hidden=\"true\">\n {trailingIcon}\n </span>\n )}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n","'use client';\n\nimport { useState, useEffect, CSSProperties } from 'react';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NavLink {\n label: string;\n href: string;\n}\n\nexport interface NavBarProps {\n /* Visual theme. \"dark\" = glass/blur on dark bg. \"light\" = white/shadow on light bg. /\n theme?: 'dark' \| 'light';\n /* Logo text displayed on the left. /\n logo?: string;\n /* Accent character appended to the logo (e.g. \".\"). /\n logoAccent?: string;\n /* Navigation links rendered in the centre. /\n links?: NavLink[];\n /* Label for the CTA button on the right. /\n ctaLabel?: string;\n /* href for the CTA button. /\n ctaHref?: string;\n /* Whether the nav background changes on scroll. /\n scrollEffect?: boolean;\n /* Scroll threshold in px before the effect triggers. Default 50. /\n scrollThreshold?: number;\n}\n\n// ─── Constants ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_LINKS: NavLink[] = [\n { label: 'About', href: '#about' },\n { label: 'Experience', href: '#experience' },\n { label: 'Projects', href: '#projects' },\n { label: 'Contact', href: '#contact' },\n];\n\n// ─── Theme tokens ─────────────────────────────────────────────────────────────\n//\n// Rule: className strings must only use standard Tailwind utilities.\n// Any value that contains a custom color or arbitrary CSS goes into\n// the companion `Style` field as a CSSProperties object, applied via\n// the `style` prop. This ensures the component works in any project\n// regardless of whether that project's Tailwind config has seen these\n// class names during its own build scan.\n\ninterface ThemeTokens {\n nav: {\n baseStyle: CSSProperties;\n scrolledStyle: CSSProperties;\n scrolledClass: string;\n };\n logo: { color: string };\n logoAccent: { color: string };\n link: string;\n cta: {\n className: string;\n style: CSSProperties;\n hoverStyle?: CSSProperties;\n };\n menuToggle: string;\n mobileMenu: {\n className: string;\n style: CSSProperties;\n };\n mobileLink: string;\n mobileCta: {\n className: string;\n style: CSSProperties;\n };\n}\n\nconst tokens: Record<'light' \| 'dark', ThemeTokens> = {\n light: {\n nav: {\n baseStyle: { background: 'transparent' },\n scrolledStyle: { background: 'rgba(248,247,244,0.90)' },\n scrolledClass: 'backdrop-blur-md shadow-sm',\n },\n logo: { color: '#0f0f0f' },\n logoAccent: { color: '#5b50f0' },\n link: 'text-gray-500 hover:bg-black/5 hover:text-gray-900 font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200',\n cta: {\n className: 'text-white shadow-lg hover:scale-[1.03] transition-all duration-200',\n style: {\n background: 'linear-gradient(135deg, #5b50f0, #7c3aed)',\n boxShadow: '0 4px 14px rgba(91,80,240,0.35)',\n },\n },\n menuToggle: 'text-gray-500 hover:text-gray-900',\n mobileMenu: {\n className: 'backdrop-blur-md border-t border-black/5',\n style: { background: 'rgba(248,247,244,0.95)' },\n },\n mobileLink:\n 'text-gray-500 hover:text-gray-900 font-sans font-medium text-base transition-colors',\n mobileCta: {\n className: 'text-white font-sans font-bold text-sm',\n style: { background: 'linear-gradient(135deg, #5b50f0, #7c3aed)' },\n },\n },\n\n dark: {\n nav: {\n baseStyle: { background: 'transparent' },\n scrolledStyle: { background: 'rgba(6,9,18,0.80)' },\n scrolledClass: 'backdrop-blur-md border-b border-white/5',\n },\n logo: { color: '#6366f1' },\n logoAccent: { color: 'rgba(255,255,255,0.20)' },\n link: 'text-slate-500 hover:text-slate-100 font-sans font-medium text-sm px-4 py-2 rounded-full transition-all duration-200',\n cta: {\n className: 'border transition-all duration-200 hover:text-white',\n style: {\n background: 'rgba(99,102,241,0.10)',\n borderColor: 'rgba(99,102,241,0.30)',\n color: '#6366f1',\n },\n },\n menuToggle: 'text-slate-500 hover:text-slate-100',\n mobileMenu: {\n className: 'backdrop-blur-md border-t border-white/5',\n style: { background: 'rgba(6,9,18,0.95)' },\n },\n mobileLink:\n 'text-slate-500 hover:text-slate-100 font-sans font-medium text-base transition-colors',\n mobileCta: {\n className: 'border font-sans font-bold text-sm',\n style: {\n background: 'rgba(99,102,241,0.10)',\n borderColor: 'rgba(99,102,241,0.30)',\n color: '#6366f1',\n },\n },\n },\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function NavBar({\n theme = 'light',\n logo = 'Fariha',\n logoAccent = '.',\n links = DEFAULT_LINKS,\n ctaLabel = 'Hire me',\n ctaHref = '#contact',\n scrollEffect = true,\n scrollThreshold = 50,\n}: NavBarProps) {\n const [scrolled, setScrolled] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const t = tokens[theme];\n\n useEffect(() => {\n if (!scrollEffect) return;\n const handler = () => setScrolled(window.scrollY > scrollThreshold);\n window.addEventListener('scroll', handler, { passive: true });\n return () => window.removeEventListener('scroll', handler);\n }, [scrollEffect, scrollThreshold]);\n\n const navStyle: CSSProperties = scrolled\n ? { ...t.nav.scrolledStyle, transition: 'all 0.5s ease' }\n : { ...t.nav.baseStyle, transition: 'all 0.5s ease' };\n\n const navClass = `fixed top-0 inset-x-0 z-50 ${scrolled ? `py-3 ${t.nav.scrolledClass}` : 'py-5'}`;\n\n return (\n <nav role=\"navigation\" aria-label=\"Main navigation\" className={navClass} style={navStyle}>\n <div className=\"max-w-6xl mx-auto px-6 flex items-center justify-between\">\n {/* Logo /}\n <a href=\"#\" className=\"font-sans font-extrabold text-lg tracking-tight\" style={t.logo}>\n {logo}\n <span style={t.logoAccent}>{logoAccent}</span>\n </a>\n\n {/ Desktop links /}\n <ul className=\"hidden md:flex items-center gap-1\" role=\"list\">\n {links.map(link => (\n <li key={link.label}>\n <a href={link.href} className={t.link}>\n {link.label}\n </a>\n </li>\n ))}\n </ul>\n\n {/ Desktop CTA /}\n <a\n href={ctaHref}\n className={`hidden md:inline-flex items-center px-5 py-2.5 rounded-full ${t.cta.className}`}\n style={t.cta.style}\n >\n {ctaLabel}\n </a>\n\n {/ Mobile toggle /}\n <button\n className={`md:hidden transition-colors ${t.menuToggle}`}\n onClick={() => setMenuOpen(prev => !prev)}\n aria-expanded={menuOpen}\n aria-label={menuOpen ? 'Close menu' : 'Open menu'}\n >\n <svg\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n >\n {menuOpen ? <path d=\"M18 6L6 18M6 6l12 12\" /> : <path d=\"M3 12h18M3 6h18M3 18h18\" />}\n </svg>\n </button>\n </div>\n\n {/ Mobile menu */}\n {menuOpen && (\n <div className={`md:hidden mt-3 ${t.mobileMenu.className}`} style={t.mobileMenu.style}>\n <ul className=\"max-w-6xl mx-auto px-6 py-5 flex flex-col gap-4\" role=\"list\">\n {links.map(link => (\n <li key={link.label}>\n <a href={link.href} onClick={() => setMenuOpen(false)} className={t.mobileLink}>\n {link.label}\n </a>\n </li>\n ))}\n <li>\n <a\n href={ctaHref}\n onClick={() => setMenuOpen(false)}\n className={`inline-block px-5 py-2.5 rounded-full ${t.mobileCta.className}`}\n style={t.mobileCta.style}\n >\n {ctaLabel}\n </a>\n </li>\n </ul>\n </div>\n )}\n </nav>\n );\n}\n\nexport default NavBar;\n"]}

package/package.json CHANGED Viewed

@@ -1,14 +1,13 @@
 {
   "name": "@farihatang/react-ui",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.2",
   "description": "A React component library to help you build your own GitHub projects more easily.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
   "files": [