cite-ui 0.1.0

package/dist/cite-ui.es.js

@@ -0,0 +1,155 @@
+import { jsxs as s, jsx as e, Fragment as h } from "react/jsx-runtime";
+import { useState as d } from "react";
+const b = ({ logo: a, links: n = [], ctaLabel: l, ctaHref: t }) => {
+  const [c, o] = d(!1);
+  return /* @__PURE__ */ s("nav", { className: "sticky top-0 z-50 bg-white border-b border-gray-200", children: [
+    /* @__PURE__ */ e("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between h-16", children: [
+      /* @__PURE__ */ e("div", { className: "text-xl font-bold tracking-tight", children: a }),
+      /* @__PURE__ */ e("div", { className: "hidden md:flex items-center gap-8", children: n.map((r, i) => /* @__PURE__ */ e(
+        "a",
+        {
+          href: r.href,
+          className: "text-gray-600 hover:text-black transition-colors",
+          children: r.label
+        },
+        i
+      )) }),
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
+        l && t && /* @__PURE__ */ e(
+          "a",
+          {
+            href: t,
+            className: "hidden md:inline-block bg-black text-white rounded-lg px-5 py-2 text-sm font-medium hover:bg-gray-800 transition-colors",
+            children: l
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => o((r) => !r),
+            className: "md:hidden p-2 rounded-md text-gray-600 hover:text-black",
+            "aria-label": "Toggle menu",
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                className: "w-6 h-6",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: c ? /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                ) : /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M4 6h16M4 12h16M4 18h16"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    ] }) }),
+    c && /* @__PURE__ */ s("div", { className: "md:hidden border-t border-gray-200 px-4 pb-4 pt-2 space-y-3", children: [
+      n.map((r, i) => /* @__PURE__ */ e(
+        "a",
+        {
+          href: r.href,
+          className: "block text-gray-600 hover:text-black transition-colors",
+          children: r.label
+        },
+        i
+      )),
+      l && t && /* @__PURE__ */ e(
+        "a",
+        {
+          href: t,
+          className: "block text-center bg-black text-white rounded-lg px-5 py-2 text-sm font-medium hover:bg-gray-800 transition-colors",
+          children: l
+        }
+      )
+    ] })
+  ] });
+}, m = {
+  primary: "bg-black text-white rounded-lg px-6 py-3",
+  secondary: "bg-transparent border border-black text-black rounded-lg px-6 py-3",
+  whatsapp: "bg-[#25D366] text-white rounded-lg px-6 py-3"
+}, u = ({ variant: a = "primary", label: n, onClick: l, className: t = "" }) => /* @__PURE__ */ s(
+  "button",
+  {
+    onClick: l,
+    className: `${m[a]} ${t}`,
+    children: [
+      a === "whatsapp" && /* @__PURE__ */ e("span", { children: "💬 " }),
+      n
+    ]
+  }
+), g = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6"
+}, k = ({ images: a = [], columns: n = 3, gap: l = 4 }) => {
+  const [t, c] = d(null);
+  return /* @__PURE__ */ s(h, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: `grid grid-cols-1 sm:grid-cols-2 ${g[n] || ""}`,
+        style: { gap: `${l * 0.25}rem` },
+        children: a.map((o, r) => /* @__PURE__ */ e(
+          "img",
+          {
+            src: o.src,
+            alt: o.alt,
+            className: "w-full h-64 object-cover rounded-lg cursor-pointer",
+            onClick: () => c(o)
+          },
+          r
+        ))
+      }
+    ),
+    t && /* @__PURE__ */ s(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center",
+        onClick: () => c(null),
+        children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: "absolute top-4 right-4 text-white text-4xl leading-none hover:opacity-70",
+              onClick: () => c(null),
+              children: "×"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "img",
+            {
+              src: t.src,
+              alt: t.alt,
+              className: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg",
+              onClick: (o) => o.stopPropagation()
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  u as Button,
+  k as Gallery,
+  b as Navbar
+};

package/dist/cite-ui.umd.js

@@ -0,0 +1 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.CiteUI={},r.ReactJsxRuntime,r.React))})(this,function(r,e,i){"use strict";const h=({logo:o,links:c=[],ctaLabel:s,ctaHref:t})=>{const[d,a]=i.useState(!1);return e.jsxs("nav",{className:"sticky top-0 z-50 bg-white border-b border-gray-200",children:[e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:"flex items-center justify-between h-16",children:[e.jsx("div",{className:"text-xl font-bold tracking-tight",children:o}),e.jsx("div",{className:"hidden md:flex items-center gap-8",children:c.map((l,n)=>e.jsx("a",{href:l.href,className:"text-gray-600 hover:text-black transition-colors",children:l.label},n))}),e.jsxs("div",{className:"flex items-center gap-4",children:[s&&t&&e.jsx("a",{href:t,className:"hidden md:inline-block bg-black text-white rounded-lg px-5 py-2 text-sm font-medium hover:bg-gray-800 transition-colors",children:s}),e.jsx("button",{onClick:()=>a(l=>!l),className:"md:hidden p-2 rounded-md text-gray-600 hover:text-black","aria-label":"Toggle menu",children:e.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:d?e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"}):e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})})]})]})}),d&&e.jsxs("div",{className:"md:hidden border-t border-gray-200 px-4 pb-4 pt-2 space-y-3",children:[c.map((l,n)=>e.jsx("a",{href:l.href,className:"block text-gray-600 hover:text-black transition-colors",children:l.label},n)),s&&t&&e.jsx("a",{href:t,className:"block text-center bg-black text-white rounded-lg px-5 py-2 text-sm font-medium hover:bg-gray-800 transition-colors",children:s})]})]})},g={primary:"bg-black text-white rounded-lg px-6 py-3",secondary:"bg-transparent border border-black text-black rounded-lg px-6 py-3",whatsapp:"bg-[#25D366] text-white rounded-lg px-6 py-3"},p=({variant:o="primary",label:c,onClick:s,className:t=""})=>e.jsxs("button",{onClick:s,className:`${g[o]} ${t}`,children:[o==="whatsapp"&&e.jsx("span",{children:"💬 "}),c]}),x={1:"lg:grid-cols-1",2:"lg:grid-cols-2",3:"lg:grid-cols-3",4:"lg:grid-cols-4",5:"lg:grid-cols-5",6:"lg:grid-cols-6"},b=({images:o=[],columns:c=3,gap:s=4})=>{const[t,d]=i.useState(null);return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:`grid grid-cols-1 sm:grid-cols-2 ${x[c]||""}`,style:{gap:`${s*.25}rem`},children:o.map((a,l)=>e.jsx("img",{src:a.src,alt:a.alt,className:"w-full h-64 object-cover rounded-lg cursor-pointer",onClick:()=>d(a)},l))}),t&&e.jsxs("div",{className:"fixed inset-0 z-50 bg-black/80 flex items-center justify-center",onClick:()=>d(null),children:[e.jsx("button",{className:"absolute top-4 right-4 text-white text-4xl leading-none hover:opacity-70",onClick:()=>d(null),children:"×"}),e.jsx("img",{src:t.src,alt:t.alt,className:"max-w-[90vw] max-h-[90vh] object-contain rounded-lg",onClick:a=>a.stopPropagation()})]})]})};r.Button=p,r.Gallery=b,r.Navbar=h,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "cite-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/cite-ui.umd.js",
+  "module": "dist/cite-ui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/cite-ui.es.js",
+      "require": "./dist/cite-ui.umd.js"
+    }
+  },
+  "files": ["dist", "src"],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "vite": "^5.4.19"
+  }
+}

package/src/components/Button/index.jsx

@@ -0,0 +1,19 @@
+const variantStyles = {
+  primary: 'bg-black text-white rounded-lg px-6 py-3',
+  secondary: 'bg-transparent border border-black text-black rounded-lg px-6 py-3',
+  whatsapp: 'bg-[#25D366] text-white rounded-lg px-6 py-3',
+}
+
+const Button = ({ variant = 'primary', label, onClick, className = '' }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`${variantStyles[variant]} ${className}`}
+    >
+      {variant === 'whatsapp' && <span>💬 </span>}
+      {label}
+    </button>
+  )
+}
+
+export default Button

package/src/components/Gallery/index.jsx

@@ -0,0 +1,55 @@
+import { useState } from 'react'
+
+const colMap = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+}
+
+const Gallery = ({ images = [], columns = 3, gap = 4 }) => {
+  const [selected, setSelected] = useState(null)
+
+  return (
+    <>
+      <div
+        className={`grid grid-cols-1 sm:grid-cols-2 ${colMap[columns] || ''}`}
+        style={{ gap: `${gap * 0.25}rem` }}
+      >
+        {images.map((img, i) => (
+          <img
+            key={i}
+            src={img.src}
+            alt={img.alt}
+            className="w-full h-64 object-cover rounded-lg cursor-pointer"
+            onClick={() => setSelected(img)}
+          />
+        ))}
+      </div>
+
+      {selected && (
+        <div
+          className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center"
+          onClick={() => setSelected(null)}
+        >
+          <button
+            className="absolute top-4 right-4 text-white text-4xl leading-none hover:opacity-70"
+            onClick={() => setSelected(null)}
+          >
+            &times;
+          </button>
+          <img
+            src={selected.src}
+            alt={selected.alt}
+            className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Gallery

package/src/components/Navbar/index.jsx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+
+const Navbar = ({ logo, links = [], ctaLabel, ctaHref }) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <nav className="sticky top-0 z-50 bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="text-xl font-bold tracking-tight">{logo}</div>
+
+          <div className="hidden md:flex items-center gap-8">
+            {links.map((link, i) => (
+              <a
+                key={i}
+                href={link.href}
+                className="text-gray-600 hover:text-black transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-4">
+            {ctaLabel && ctaHref && (
+              <a
+                href={ctaHref}
+                className="hidden md:inline-block bg-black text-white rounded-lg px-5 py-2 text-sm font-medium hover:bg-gray-800 transition-colors"
+              >
+                {ctaLabel}
+              </a>
+            )}
+
+            <button
+              onClick={() => setOpen((v) => !v)}
+              className="md:hidden p-2 rounded-md text-gray-600 hover:text-black"
+              aria-label="Toggle menu"
+            >
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                {open ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {open && (
+        <div className="md:hidden border-t border-gray-200 px-4 pb-4 pt-2 space-y-3">
+          {links.map((link, i) => (
+            <a
+              key={i}
+              href={link.href}
+              className="block text-gray-600 hover:text-black transition-colors"
+            >
+              {link.label}
+            </a>
+          ))}
+          {ctaLabel && ctaHref && (
+            <a
+              href={ctaHref}
+              className="block text-center bg-black text-white rounded-lg px-5 py-2 text-sm font-medium hover:bg-gray-800 transition-colors"
+            >
+              {ctaLabel}
+            </a>
+          )}
+        </div>
+      )}
+    </nav>
+  )
+}
+
+export default Navbar

package/src/index.jsx

@@ -0,0 +1,3 @@
+export { default as Navbar } from './components/Navbar'
+export { default as Button } from './components/Button'
+export { default as Gallery } from './components/Gallery'

package/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;