@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/layouts/site-header/category-strip.tsx

@@ -0,0 +1,41 @@
+import { cn } from '../../lib/utils'
+import type { SiteHeaderCategory } from './site-header-types'
+
+export interface CategoryStripProps {
+  categories: readonly SiteHeaderCategory[]
+  className?: string
+  onSelect?: (category: SiteHeaderCategory) => void
+}
+
+export function CategoryStrip({ categories, className, onSelect }: CategoryStripProps) {
+  if (!categories || categories.length === 0) return null
+
+  return (
+    <div className={cn('w-full border-t border-border/40 bg-muted/20 select-none', className)}>
+      <div className="mx-auto flex h-10 w-full max-w-7xl items-center overflow-x-auto px-4 scrollbar-none sm:px-6 lg:px-8">
+        <nav aria-label="Category navigation" className="flex items-center gap-1.5 min-w-max">
+          {categories.map((cat) => (
+            <a
+              className={cn(
+                'rounded-lg px-2.5 py-1 text-xs font-medium transition-colors',
+                cat.active
+                  ? 'bg-background text-foreground font-semibold shadow-2xs'
+                  : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+              )}
+              href={cat.href}
+              key={cat.id}
+              onClick={(e) => {
+                if (onSelect) {
+                  e.preventDefault()
+                  onSelect(cat)
+                }
+              }}
+            >
+              {cat.label}
+            </a>
+          ))}
+        </nav>
+      </div>
+    </div>
+  )
+}

package/src/layouts/site-header/index.ts

@@ -0,0 +1,16 @@
+export { SiteHeader } from './site-header'
+export { AnnouncementBar } from './announcement-bar'
+export { MainNavbar } from './main-navbar'
+export { CategoryStrip } from './category-strip'
+export { MobileDrawer } from './mobile-drawer'
+export type {
+  SiteAnnouncementProps,
+  SiteHeaderActions,
+  SiteHeaderBrand,
+  SiteHeaderCategory,
+  SiteHeaderNavLink,
+  SiteHeaderProps,
+} from './site-header-types'
+export type { MainNavbarProps } from './main-navbar'
+export type { CategoryStripProps } from './category-strip'
+export type { MobileDrawerProps } from './mobile-drawer'

package/src/layouts/site-header/main-navbar.tsx

@@ -0,0 +1,179 @@
+import { Menu, Search, ShoppingBag, SunMoon, User } from 'lucide-react'
+import { Badge } from '../../components/badge'
+import { Button } from '../../components/button'
+import { cn } from '../../lib/utils'
+import type { SiteHeaderActions, SiteHeaderBrand, SiteHeaderNavLink } from './site-header-types'
+
+export interface MainNavbarProps {
+  actions?: SiteHeaderActions
+  brand: SiteHeaderBrand
+  links?: readonly SiteHeaderNavLink[]
+  onOpenMobileMenu?: () => void
+}
+
+export function MainNavbar({ actions = {}, brand, links = [], onOpenMobileMenu }: MainNavbarProps) {
+  const {
+    accountHref = '/account',
+    cartCount = 0,
+    ctaHref,
+    ctaLabel = 'Get Started',
+    onAccountClick,
+    onCartClick,
+    onCtaClick,
+    onSearchClick,
+    onThemeToggle,
+    searchPlaceholder = 'Search...',
+    showAccount = true,
+    showCart = true,
+    showCta = true,
+    showSearch = true,
+    showThemeToggle = true,
+  } = actions
+
+  return (
+    <div className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
+      {/* Brand */}
+      <div className="flex items-center gap-3">
+        <a
+          className="flex items-center gap-2.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          href={brand.href ?? '/'}
+        >
+          {brand.logo ? (
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground font-bold">
+              {brand.logo}
+            </div>
+          ) : (
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground font-bold text-sm">
+              {brand.title.slice(0, 2).toUpperCase()}
+            </div>
+          )}
+
+          <div className="flex flex-col">
+            <div className="flex items-center gap-2">
+              <span className="text-base font-bold tracking-tight text-foreground">
+                {brand.title}
+              </span>
+              {brand.badge && (
+                <Badge className="text-[10px] font-semibold" variant="secondary">
+                  {brand.badge}
+                </Badge>
+              )}
+            </div>
+            {brand.tagline && (
+              <span className="text-[11px] text-muted-foreground hidden sm:inline-block">
+                {brand.tagline}
+              </span>
+            )}
+          </div>
+        </a>
+      </div>
+
+      {/* Centered Navigation */}
+      {links.length > 0 && (
+        <nav aria-label="Main navigation" className="hidden md:flex items-center gap-1">
+          {links.map((link) => (
+            <a
+              className={cn(
+                'relative flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors select-none',
+                link.active
+                  ? 'text-primary font-semibold'
+                  : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+              )}
+              href={link.href}
+              key={link.href}
+              rel={link.external ? 'noopener noreferrer' : undefined}
+              target={link.external ? '_blank' : undefined}
+            >
+              {link.label}
+              {link.badge && (
+                <span className="rounded-full bg-primary/10 px-1.5 py-0.2 text-[10px] font-semibold text-primary">
+                  {link.badge}
+                </span>
+              )}
+            </a>
+          ))}
+        </nav>
+      )}
+
+      {/* Action Cluster */}
+      <div className="flex items-center gap-1.5 sm:gap-2">
+        {showSearch && (
+          <button
+            aria-label="Search"
+            className="flex items-center gap-2 rounded-xl border border-border/80 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:border-foreground/30 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            type="button"
+            onClick={onSearchClick}
+          >
+            <Search className="size-4" />
+            <span className="hidden lg:inline-block">{searchPlaceholder}</span>
+            <kbd className="hidden lg:inline-flex rounded border bg-background px-1 text-[10px] font-mono">
+              ⌘K
+            </kbd>
+          </button>
+        )}
+
+        {showThemeToggle && onThemeToggle && (
+          <Button
+            aria-label="Toggle theme mode"
+            className="size-8.5 rounded-xl text-muted-foreground hover:text-foreground"
+            size="icon"
+            variant="ghost"
+            onClick={onThemeToggle}
+          >
+            <SunMoon className="size-4" />
+          </Button>
+        )}
+
+        {showAccount && (
+          <a
+            aria-label="Account profile"
+            className="inline-flex size-8.5 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            href={accountHref}
+            onClick={onAccountClick}
+          >
+            <User className="size-4" />
+          </a>
+        )}
+
+        {showCart && (
+          <button
+            aria-label={`Shopping cart with ${cartCount} items`}
+            className="relative inline-flex size-8.5 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            type="button"
+            onClick={onCartClick}
+          >
+            <ShoppingBag className="size-4" />
+            {cartCount > 0 && (
+              <span className="absolute -right-1 -top-1 flex size-4.5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground shadow-xs animate-in zoom-in">
+                {cartCount > 99 ? '99+' : cartCount}
+              </span>
+            )}
+          </button>
+        )}
+
+        {showCta && (
+          <Button
+            className="hidden sm:inline-flex rounded-xl font-semibold"
+            render={ctaHref ? <a href={ctaHref} /> : undefined}
+            size="sm"
+            variant="default"
+            onClick={onCtaClick}
+          >
+            {ctaLabel}
+          </Button>
+        )}
+
+        {/* Mobile menu trigger */}
+        <Button
+          aria-label="Open navigation menu"
+          className="md:hidden size-8.5 rounded-xl text-muted-foreground hover:text-foreground"
+          size="icon"
+          variant="ghost"
+          onClick={onOpenMobileMenu}
+        >
+          <Menu className="size-4.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/layouts/site-header/mobile-drawer.tsx

@@ -0,0 +1,140 @@
+import { Search, X } from 'lucide-react'
+import { Button } from '../../components/button'
+import { cn } from '../../lib/utils'
+import type {
+  SiteHeaderActions,
+  SiteHeaderBrand,
+  SiteHeaderCategory,
+  SiteHeaderNavLink,
+} from './site-header-types'
+
+export interface MobileDrawerProps {
+  actions?: SiteHeaderActions
+  brand: SiteHeaderBrand
+  categories?: readonly SiteHeaderCategory[]
+  isOpen: boolean
+  links?: readonly SiteHeaderNavLink[]
+  onClose: () => void
+}
+
+export function MobileDrawer({
+  actions = {},
+  brand,
+  categories = [],
+  isOpen,
+  links = [],
+  onClose,
+}: MobileDrawerProps) {
+  if (!isOpen) return null
+
+  return (
+    <div
+      aria-label="Mobile navigation"
+      aria-modal="true"
+      className="fixed inset-0 z-50 flex md:hidden"
+      role="dialog"
+    >
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-background/80 backdrop-blur-xs transition-opacity"
+        onClick={onClose}
+      />
+
+      {/* Drawer surface */}
+      <div className="relative ml-auto flex h-full w-full max-w-xs flex-col gap-4 border-l border-border/80 bg-background p-5 shadow-xl animate-in slide-in-from-right duration-200">
+        <div className="flex items-center justify-between border-b border-border/60 pb-3">
+          <span className="font-bold tracking-tight text-foreground">{brand.title}</span>
+          <button
+            aria-label="Close navigation"
+            className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+            type="button"
+            onClick={onClose}
+          >
+            <X className="size-5" />
+          </button>
+        </div>
+
+        {actions.showSearch && (
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground/60" />
+            <input
+              className="h-9 w-full rounded-xl border border-border/80 bg-muted/30 pl-8 pr-3 text-xs text-foreground placeholder:text-muted-foreground/60 focus:border-ring focus:bg-background focus:outline-none"
+              placeholder={actions.searchPlaceholder || 'Search products & projects...'}
+              type="text"
+            />
+          </div>
+        )}
+
+        <div className="flex flex-1 flex-col gap-4 overflow-y-auto pr-1">
+          {/* Main links */}
+          <nav className="flex flex-col gap-1">
+            <span className="px-2 text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+              Navigation
+            </span>
+            {links.map((link) => (
+              <a
+                className={cn(
+                  'flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  link.active
+                    ? 'bg-primary/10 text-primary font-semibold'
+                    : 'text-foreground/80 hover:bg-muted hover:text-foreground',
+                )}
+                href={link.href}
+                key={link.href}
+                onClick={onClose}
+              >
+                <span>{link.label}</span>
+                {link.badge && (
+                  <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
+                    {link.badge}
+                  </span>
+                )}
+              </a>
+            ))}
+          </nav>
+
+          {/* Categories */}
+          {categories.length > 0 && (
+            <div className="flex flex-col gap-1 border-t border-border/40 pt-3">
+              <span className="px-2 text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+                Categories
+              </span>
+              <div className="flex flex-wrap gap-1.5 px-2 pt-1">
+                {categories.map((cat) => (
+                  <a
+                    className={cn(
+                      'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
+                      cat.active
+                        ? 'bg-primary text-primary-foreground font-semibold'
+                        : 'bg-muted/70 text-foreground/80 hover:bg-muted',
+                    )}
+                    href={cat.href}
+                    key={cat.id}
+                    onClick={onClose}
+                  >
+                    {cat.label}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {actions.showCta && (
+          <div className="border-t border-border/60 pt-3">
+            <Button
+              className="w-full rounded-xl font-semibold"
+              render={actions.ctaHref ? <a href={actions.ctaHref} /> : undefined}
+              onClick={() => {
+                actions.onCtaClick?.()
+                onClose()
+              }}
+            >
+              {actions.ctaLabel || 'Get Started'}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/layouts/site-header/site-header-types.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react'
+
+export interface SiteHeaderNavLink {
+  active?: boolean
+  badge?: string
+  external?: boolean
+  href: string
+  label: string
+}
+
+export interface SiteHeaderCategory {
+  active?: boolean
+  href: string
+  id: string
+  label: string
+}
+
+export interface SiteAnnouncementProps {
+  actionLabel?: string
+  actionUrl?: string
+  dismissible?: boolean
+  message: string
+  onDismiss?: () => void
+  show?: boolean
+}
+
+export interface SiteHeaderBrand {
+  badge?: string
+  href?: string
+  logo?: ReactNode
+  tagline?: string
+  title: string
+}
+
+export interface SiteHeaderActions {
+  accountHref?: string
+  cartCount?: number
+  ctaHref?: string
+  ctaLabel?: string
+  onAccountClick?: () => void
+  onCartClick?: () => void
+  onCtaClick?: () => void
+  onSearchClick?: () => void
+  onThemeToggle?: () => void
+  searchPlaceholder?: string
+  showAccount?: boolean
+  showCart?: boolean
+  showCta?: boolean
+  showSearch?: boolean
+  showThemeToggle?: boolean
+}
+
+export interface SiteHeaderProps {
+  actions?: SiteHeaderActions
+  announcement?: SiteAnnouncementProps
+  brand: SiteHeaderBrand
+  categories?: readonly SiteHeaderCategory[]
+  className?: string
+  links?: readonly SiteHeaderNavLink[]
+  onCategorySelect?: (category: SiteHeaderCategory) => void
+  showCategories?: boolean
+  sticky?: boolean
+}

package/src/layouts/site-header/site-header.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { cn } from '../../lib/utils'
+import { AnnouncementBar } from './announcement-bar'
+import { CategoryStrip } from './category-strip'
+import { MainNavbar } from './main-navbar'
+import { MobileDrawer } from './mobile-drawer'
+import type { SiteHeaderProps } from './site-header-types'
+
+export function SiteHeader({
+  actions,
+  announcement,
+  brand,
+  categories = [],
+  className,
+  links = [],
+  onCategorySelect,
+  showCategories = true,
+  sticky = true,
+}: SiteHeaderProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <header
+      className={cn(
+        'w-full flex flex-col z-40 transition-shadow',
+        sticky &&
+          'sticky top-0 bg-background/90 backdrop-blur-md border-b border-border/70 shadow-2xs',
+        className,
+      )}
+    >
+      {/* 1. Top Announcement Bar */}
+      {announcement && <AnnouncementBar {...announcement} />}
+
+      {/* 2. Primary Navigation Bar */}
+      <MainNavbar
+        actions={actions}
+        brand={brand}
+        links={links}
+        onOpenMobileMenu={() => setMobileMenuOpen(true)}
+      />
+
+      {/* 3. Sub-navigation Category Strip */}
+      {showCategories && categories.length > 0 && (
+        <CategoryStrip categories={categories} onSelect={onCategorySelect} />
+      )}
+
+      {/* 4. Responsive Mobile Drawer */}
+      <MobileDrawer
+        actions={actions}
+        brand={brand}
+        categories={categories}
+        isOpen={mobileMenuOpen}
+        links={links}
+        onClose={() => setMobileMenuOpen(false)}
+      />
+    </header>
+  )
+}

package/src/lib/random-id.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns an RFC 4122 version 4 identifier without requiring `crypto.randomUUID`.
+ *
+ * Older browsers can provide `getRandomValues` but not `randomUUID`; the final
+ * fallback keeps non-security-critical client correlation IDs working as well.
+ */
+export function createRandomId(): string {
+  const browserCrypto = globalThis.crypto;
+  if (typeof browserCrypto?.randomUUID === "function") return browserCrypto.randomUUID();
+
+  const bytes = new Uint8Array(16);
+  if (typeof browserCrypto?.getRandomValues === "function") browserCrypto.getRandomValues(bytes);
+  else for (let index = 0; index < bytes.length; index += 1) bytes[index] = Math.floor(Math.random() * 256);
+
+  bytes[6] = (bytes[6] & 0x0f) | 0x40;
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+  const hex = Array.from(bytes, (value) => value.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/src/providers/pdf-provider.ts

@@ -0,0 +1,137 @@
+import { jsPDF } from "jspdf";
+
+export type PdfDocumentSource = {
+  content: string;
+  title: string;
+};
+
+export type PdfShareChannel = "email" | "whatsapp";
+
+export class PdfProvider {
+  static async copyText(content: string): Promise<void> {
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(content);
+        return;
+      } catch {
+        // Browser clipboard permissions can be unavailable in embedded desktop webviews.
+      }
+    }
+
+    const textarea = window.document.createElement("textarea");
+    textarea.value = content;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    window.document.body.append(textarea);
+    textarea.select();
+    window.document.execCommand("copy");
+    textarea.remove();
+  }
+
+  static async shareText(source: PdfDocumentSource): Promise<void> {
+    if (navigator.share) {
+      try {
+        await navigator.share({ text: source.content, title: source.title });
+        return;
+      } catch (error) {
+        if ((error as { name?: string }).name === "AbortError") return;
+      }
+    }
+    await this.copyText(source.content);
+  }
+
+  static async create(source: PdfDocumentSource): Promise<File> {
+    const document = new jsPDF({ format: "a4", unit: "mm" });
+    const margin = 18;
+    const pageWidth = document.internal.pageSize.getWidth() - margin * 2;
+    const pageHeight = document.internal.pageSize.getHeight() - margin * 2;
+    const title = source.title.trim() || "Zetro response";
+    const lines = document.splitTextToSize(toPlainText(source.content), pageWidth);
+    let cursor = margin;
+
+    document.setFont("helvetica", "bold");
+    document.setFontSize(16);
+    document.text(title, margin, cursor);
+    cursor += 10;
+    document.setFont("helvetica", "normal");
+    document.setFontSize(10);
+
+    for (const line of lines) {
+      if (cursor > pageHeight) {
+        document.addPage();
+        cursor = margin;
+      }
+      document.text(line, margin, cursor);
+      cursor += 5;
+    }
+
+    const pageCount = document.getNumberOfPages();
+    for (let page = 1; page <= pageCount; page += 1) {
+      document.setPage(page);
+      document.setFontSize(8);
+      document.setTextColor(110);
+      document.text(`Zetro · ${page} / ${pageCount}`, margin, document.internal.pageSize.getHeight() - 10);
+      document.setTextColor(0);
+    }
+
+    return new File([document.output("blob")], `${toFileName(title)}.pdf`, { type: "application/pdf" });
+  }
+
+  static async download(source: PdfDocumentSource): Promise<File> {
+    const file = await this.create(source);
+    const url = URL.createObjectURL(file);
+    const anchor = window.document.createElement("a");
+    anchor.href = url;
+    anchor.download = file.name;
+    anchor.click();
+    window.setTimeout(() => URL.revokeObjectURL(url), 0);
+    return file;
+  }
+
+  static print(source: PdfDocumentSource): void {
+    const printWindow = window.open("", "_blank", "popup");
+    if (!printWindow) throw new Error("Allow pop-ups to print this response.");
+    printWindow.document.write(printDocument(source));
+    printWindow.document.close();
+    printWindow.focus();
+    printWindow.print();
+  }
+
+  static async share(source: PdfDocumentSource, channel: PdfShareChannel): Promise<void> {
+    const file = await this.create(source);
+    if (navigator.share && navigator.canShare?.({ files: [file] })) {
+      await navigator.share({ files: [file], text: source.title, title: source.title });
+      return;
+    }
+
+    await this.download(source);
+    const message = encodeURIComponent(`${source.title}\n\nThe PDF has downloaded and is ready to attach.`);
+    if (channel === "email") {
+      window.location.assign(`mailto:?subject=${encodeURIComponent(source.title)}&body=${message}`);
+      return;
+    }
+    window.open(`https://wa.me/?text=${message}`, "_blank", "noopener,noreferrer");
+  }
+}
+
+function toPlainText(value: string): string {
+  const parser = new DOMParser();
+  return (parser.parseFromString(value, "text/html").body.textContent || value)
+    .replace(/```[\s\S]*?```/g, (block) => block.replace(/```/g, ""))
+    .replace(/[`*_#]/g, "")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function toFileName(value: string): string {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "zetro-response";
+}
+
+function printDocument(source: PdfDocumentSource): string {
+  const content = escapeHtml(source.content).replace(/\n/g, "<br />");
+  return `<!doctype html><html><head><title>${escapeHtml(source.title)}</title><style>@page { margin: 18mm; } body { color: #111; font: 11pt/1.6 Arial, sans-serif; } h1 { font-size: 18pt; margin: 0 0 12mm; } article { white-space: normal; } </style></head><body><h1>${escapeHtml(source.title)}</h1><article>${content}</article></body></html>`;
+}
+
+function escapeHtml(value: string): string {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}