@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/homepage/types/index.ts

@@ -1,183 +0,0 @@
-export type HomepageSectionType =
-  | "hero"
-  | "featured_categories"
-  | "featured_products"
-  | "banner"
-  | "testimonials"
-  | "promotions"
-  | "blog_posts"
-  | "sellers"
-  | "custom";
-
-export interface HomepageSectionContent {
-  title?: string;
-  subtitle?: string;
-  ctaLabel?: string;
-  ctaUrl?: string;
-  imageUrl?: string;
-  videoUrl?: string;
-  itemIds?: string[];
-  html?: string;
-}
-
-export interface HomepageSection {
-  id: string;
-  type: HomepageSectionType;
-  title?: string;
-  /** Primary enable/disable flag stored in Firestore as `enabled` */
-  enabled?: boolean;
-  /** Alias kept for older consumers */
-  isVisible?: boolean;
-  order?: number;
-  content?: HomepageSectionContent;
-  mobile?: Partial<HomepageSectionContent>;
-  createdAt?: string;
-  updatedAt?: string;
-}
-
-export interface HomepageData {
-  sections: HomepageSection[];
-}
-
-// ─── CharacterHotspot ────────────────────────────────────────────────────────
-
-export interface HotspotPin {
-  id: string;
-  name: string;
-  universe: string;
-  description: string;
-  href: string;
-  /** Percentage from left edge, 0–100 */
-  xPct: number;
-  /** Percentage from top edge, 0–100 */
-  yPct: number;
-  /** Hex accent colour for popup header/button */
-  accent: string;
-  /** Small label on pin (optional) */
-  badge?: string;
-  /** CTA button label */
-  buyText: string;
-}
-
-export interface CharacterHotspotConfig {
-  imageUrl: string;
-  imageAlt: string;
-  active: boolean;
-  pins: HotspotPin[];
-  updatedAt?: string;
-}
-
-// ─── Hero Banner ─────────────────────────────────────────────────────────────
-
-export interface Banner {
-  id: string;
-  title: string;
-  subtitle?: string;
-  ctaLabel?: string;
-  ctaUrl?: string;
-  backgroundImage?: string;
-  backgroundColor?: string;
-  textColor?: string;
-  sortOrder: number;
-  active: boolean;
-}
-
-// ─── Promo Grid ──────────────────────────────────────────────────────────────
-
-export interface PromoBanner {
-  id: string;
-  title: string;
-  ctaLabel: string;
-  ctaUrl: string;
-  image: string;
-  sortOrder: number;
-  active: boolean;
-}
-
-// ─── Trust Badges ────────────────────────────────────────────────────────────
-
-export type TrustBadgeIconKey = "shipping" | "support" | "rewards" | "secure";
-
-export interface TrustBadge {
-  id: string;
-  title: string;
-  sub: string;
-  iconKey: TrustBadgeIconKey;
-  sortOrder: number;
-  active: boolean;
-}
-
-// ─── Testimonials ─────────────────────────────────────────────────────────────
-
-export interface Testimonial {
-  id: string;
-  name: string;
-  rating: 1 | 2 | 3 | 4 | 5;
-  text: string;
-  avatarUrl?: string;
-  featured: boolean;
-  sortOrder: number;
-  active: boolean;
-}
-
-// ─── Before / After Gallery ───────────────────────────────────────────────────
-
-export interface BeforeAfterItem {
-  id: string;
-  beforeImage: string;
-  afterImage: string;
-  productId?: string;
-  caption: string;
-  sortOrder: number;
-}
-
-// ─── Carousel Slide ───────────────────────────────────────────────────────────
-
-export interface CarouselSlideCard {
-  id: string;
-  gridRow: 1 | 2;
-  gridCol: 1 | 2 | 3;
-  background: {
-    type: "color" | "gradient" | "image" | "transparent";
-    value: string;
-  };
-  content?: { title?: string; subtitle?: string; description?: string };
-  buttons?: Array<{
-    id: string;
-    text: string;
-    link: string;
-    variant: "primary" | "secondary" | "outline";
-    openInNewTab: boolean;
-  }>;
-  isButtonOnly: boolean;
-  sizing?: {
-    widthPct?: 25 | 50 | 75 | 100;
-    heightPct?: 25 | 50 | 75 | 100;
-    padding?: "none" | "sm" | "md" | "lg";
-  };
-}
-
-export interface CarouselSlide {
-  id: string;
-  title: string;
-  order: number;
-  active: boolean;
-  media: { type: "image" | "video"; url: string; alt: string; thumbnail?: string };
-  link?: { url: string; openInNewTab: boolean };
-  mobileMedia?: { type: "image" | "video"; url: string; alt: string };
-  cards: CarouselSlideCard[];
-  overlay?: {
-    title?: string;
-    subtitle?: string;
-    description?: string;
-    button?: {
-      id: string;
-      text: string;
-      link: string;
-      variant: "primary" | "secondary" | "outline";
-      openInNewTab: boolean;
-    };
-  };
-  createdAt?: string;
-  updatedAt?: string;
-}

package/src/features/layout/AutoBreadcrumbs.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import React from "react";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { Li, Nav, Ol, Span } from "../../ui";
-
-/** Map of path segments → human-readable labels. */
-const DEFAULT_PATH_LABELS: Record<string, string> = {
-  auth: "Authentication",
-  login: "Login",
-  register: "Register",
-  "forgot-password": "Forgot Password",
-  "reset-password": "Reset Password",
-  "verify-email": "Verify Email",
-  profile: "Profile",
-  settings: "Settings",
-  admin: "Admin",
-  users: "Users",
-  dashboard: "Dashboard",
-  products: "Products",
-  cart: "Cart",
-  wishlist: "Wishlist",
-  orders: "Orders",
-  addresses: "Addresses",
-  categories: "Categories",
-  search: "Search",
-  checkout: "Checkout",
-  blog: "Blog",
-  view: "View",
-  add: "Add",
-  edit: "Edit",
-};
-
-// Common locale codes filtered out of path segments
-const LOCALE_CODES = new Set([
-  "en",
-  "hi",
-  "fr",
-  "de",
-  "es",
-  "pt",
-  "zh",
-  "ja",
-  "ko",
-  "ar",
-  "mr",
-  "bn",
-  "ta",
-  "te",
-  "gu",
-  "kn",
-  "ml",
-  "pa",
-  "ur",
-]);
-
-export interface AutoBreadcrumbsProps {
-  /** Additional path segment → label overrides. Merged with defaults. */
-  pathLabels?: Record<string, string>;
-  /** Custom separator. Defaults to "/" */
-  separator?: React.ReactNode;
-  className?: string;
-  /** Custom link renderer — defaults to a plain `<a>`. */
-  renderLink?: (href: string, label: string) => React.ReactNode;
-}
-
-function capitalize(s: string) {
-  return s.charAt(0).toUpperCase() + s.slice(1).replace(/-/g, " ");
-}
-
-/**
- * AutoBreadcrumbs — generates breadcrumb navigation automatically from the
- * current URL path. Zero props required for basic use.
- */
-export function AutoBreadcrumbs({
-  pathLabels,
-  separator = "/",
-  className = "",
-  renderLink,
-}: AutoBreadcrumbsProps) {
-  const pathname = usePathname();
-  const labels = { ...DEFAULT_PATH_LABELS, ...pathLabels };
-
-  const segments = pathname
-    .split("/")
-    .filter(Boolean)
-    .filter(
-      (seg) =>
-        !LOCALE_CODES.has(seg.toLowerCase()) &&
-        !/^[0-9a-f-]{8,}$/.test(seg) &&
-        !/^\d+$/.test(seg),
-    );
-
-  if (segments.length === 0) return null;
-
-  const crumbs = segments.map((seg, i) => ({
-    label: labels[seg] ?? capitalize(seg),
-    href: "/" + segments.slice(0, i + 1).join("/"),
-  }));
-
-  const allCrumbs = [{ label: "Home", href: "/" }, ...crumbs];
-
-  return (
-    <Nav aria-label="Breadcrumb" className={className}>
-      <Ol className="flex items-center gap-2 text-sm flex-wrap">
-        {allCrumbs.map((crumb, index) => {
-          const isLast = index === allCrumbs.length - 1;
-          return (
-            <Li key={crumb.href} className="flex items-center gap-2">
-              {isLast ? (
-                <Span
-                  aria-current="page"
-                  className="text-zinc-500 dark:text-zinc-400"
-                >
-                  {crumb.label}
-                </Span>
-              ) : renderLink ? (
-                renderLink(crumb.href, crumb.label)
-              ) : (
-                <Link
-                  href={crumb.href}
-                  className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
-                >
-                  {crumb.label}
-                </Link>
-              )}
-              {!isLast && (
-                <Span
-                  className="text-zinc-400 dark:text-zinc-500 select-none"
-                  aria-hidden="true"
-                >
-                  {separator}
-                </Span>
-              )}
-            </Li>
-          );
-        })}
-      </Ol>
-    </Nav>
-  );
-}

package/src/features/layout/BackToTop.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { ChevronUp } from "lucide-react";
-import { Button } from "../../ui";
-
-export interface BackToTopProps {
-  /** Scroll distance (px) before the button appears. Defaults to 400. */
-  threshold?: number;
-  ariaLabel?: string;
-  className?: string;
-}
-
-/**
- * BackToTop — floating scroll-to-top button.
- * Appears after the page has scrolled past `threshold` pixels.
- */
-export function BackToTop({
-  threshold = 400,
-  ariaLabel = "Back to top",
-  className = "",
-}: BackToTopProps) {
-  const [visible, setVisible] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => setVisible(window.scrollY > threshold);
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [threshold]);
-
-  if (!visible) return null;
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      size="sm"
-      aria-label={ariaLabel}
-      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-      className={`fixed bottom-20 right-4 z-40 flex items-center justify-center w-10 h-10 rounded-full bg-white dark:bg-slate-800 border border-zinc-200 dark:border-slate-700 shadow-md text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-700 transition-colors ${className}`}
-    >
-      <ChevronUp className="w-5 h-5" aria-hidden="true" />
-    </Button>
-  );
-}
-
-/** SkipToMain — visually hidden link that becomes visible on focus for keyboard users. */
-export function SkipToMain({ mainId = "main-content" }: { mainId?: string }) {
-  return (
-    <Link
-      href={`#${mainId}`}
-      className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:rounded-lg focus:bg-white dark:focus:bg-slate-900 focus:text-zinc-900 dark:focus:text-zinc-100 focus:shadow-lg focus:ring-2 focus:ring-primary-500 focus:outline-none text-sm font-medium"
-    >
-      Skip to main content
-    </Link>
-  );
-}

package/src/features/layout/BottomNavItem.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import React from "react";
-
-import { Li, Span } from "../../ui";
-
-export interface BottomNavItemProps {
-  href: string;
-  label: string;
-  icon: React.ReactNode;
-  badge?: number | null;
-  isActive?: boolean;
-  className?: string;
-}
-
-/**
- * BottomNavItem — a single tap target inside `<BottomNavLayout>`.
- *
- * Renders as `<a>` via Next.js `<Link>`. The consumer project wires
- * `isActive` by comparing the current pathname against `href`.
- *
- * @example
- * ```tsx
- * <BottomNavLayout ariaLabel="Main navigation">
- *   <BottomNavItem
- *     href="/products"
- *     icon={<ShoppingBagIcon className="w-6 h-6" />}
- *     label="Shop"
- *     isActive={pathname === "/products"}
- *   />
- * </BottomNavLayout>
- * ```
- */
-export function BottomNavItem({
-  href,
-  label,
-  icon,
-  badge,
-  isActive = false,
-  className,
-}: BottomNavItemProps) {
-  // Use a plain anchor so this component stays framework-agnostic.
-  // Consumer projects may swap for next/link if preferred.
-  return (
-    <Li className="flex-1">
-      <a
-        href={href}
-        aria-label={label}
-        aria-current={isActive ? "page" : undefined}
-        className={`relative flex flex-col items-center justify-center gap-0.5 h-full w-full min-h-[44px] transition-colors ${
-          isActive
-            ? "text-primary-600 dark:text-secondary-400"
-            : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"
-        }${className ? ` ${className}` : ""}`}
-      >
-        <Span className="relative">
-          {icon}
-          {badge != null && badge > 0 && (
-            <Span
-              aria-label={`${badge} items`}
-              className="absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold bg-secondary-500 text-white flex items-center justify-center leading-none"
-            >
-              {badge > 99 ? "99+" : badge}
-            </Span>
-          )}
-        </Span>
-        <Span className="text-[10px] font-medium leading-none">{label}</Span>
-      </a>
-    </Li>
-  );
-}

package/src/features/layout/BottomNavLayout.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import React from "react";
-import { Nav, Ul } from "../../ui";
-
-export interface BottomNavLayoutProps {
-  ariaLabel: string;
-  children: React.ReactNode;
-  id?: string;
-  className?: string;
-}
-
-/**
- * BottomNavLayout — generic fixed-bottom navigation shell.
- *
- * Provides the `nav + ul` container with correct z-index, background, height,
- * and safe-area inset. Pass `li`-wrapped items as children.
- */
-export function BottomNavLayout({
-  ariaLabel,
-  children,
-  id = "bottom-navbar",
-  className,
-}: BottomNavLayoutProps) {
-  return (
-    <Nav
-      id={id}
-      aria-label={ariaLabel}
-      className={`fixed bottom-0 left-0 right-0 md:hidden z-40 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80 shadow-2xl pb-safe${className ? ` ${className}` : ""}`}
-    >
-      <Ul className="flex items-stretch h-14">{children}</Ul>
-    </Nav>
-  );
-}

package/src/features/layout/BottomSheet.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import React, { useEffect, useCallback } from "react";
-import { Button, Div, Span } from "../../ui";
-
-export interface BottomSheetProps {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  /** Extra classes on the drawer panel */
-  className?: string;
-  /** Max height of the sheet. Defaults to "max-h-[85dvh]" */
-  maxHeight?: string;
-}
-
-/**
- * BottomSheet — mobile-first drawer that slides up from the bottom.
- *
- * - Slides up from the bottom on mobile.
- * - Accessible: focuses trap not implemented (add `focus-trap-react` if needed),
- *   but `role="dialog"`, `aria-modal`, and `aria-label` are set.
- * - Closes on backdrop click or Escape key.
- * - Hidden on `lg:` and above (use a sidebar instead).
- *
- * @example
- * ```tsx
- * <BottomSheet open={isOpen} onClose={() => setIsOpen(false)} title="Filters">
- *   <FilterPanel />
- * </BottomSheet>
- * ```
- */
-export function BottomSheet({
-  open,
-  onClose,
-  title,
-  children,
-  className,
-  maxHeight = "max-h-[85dvh]",
-}: BottomSheetProps) {
-  const handleEscape = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    if (open) {
-      document.addEventListener("keydown", handleEscape);
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "";
-    };
-  }, [open, handleEscape]);
-
-  if (!open) return null;
-
-  return (
-    <Div className="fixed inset-0 z-50 lg:hidden" role="presentation">
-      {/* Backdrop */}
-      <Div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        aria-hidden="true"
-        onClick={onClose}
-      />
-
-      {/* Drawer panel */}
-      <Div
-        role="dialog"
-        aria-modal="true"
-        aria-label={title}
-        className={`absolute bottom-0 inset-x-0 flex flex-col rounded-t-2xl bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 shadow-2xl ${maxHeight} animate-slide-up${className ? ` ${className}` : ""}`}
-      >
-        {/* Handle and header */}
-        <Div className="flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-zinc-800 shrink-0">
-          {/* Drag handle */}
-          <Div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-600" />
-
-          {title && (
-            <Span className="text-sm font-semibold text-zinc-800 dark:text-zinc-100 mt-2">
-              {title}
-            </Span>
-          )}
-
-          <Button
-            type="button"
-            onClick={onClose}
-            aria-label="Close"
-            className="ml-auto mt-2 p-1.5 rounded-lg text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center"
-          >
-            {/* ✕ */}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </Button>
-        </Div>
-
-        {/* Scrollable content */}
-        <Div className="flex-1 overflow-y-auto overscroll-contain pb-[env(safe-area-inset-bottom)]">
-          {children}
-        </Div>
-      </Div>
-    </Div>
-  );
-}

package/src/features/layout/Breadcrumbs.tsx

@@ -1,83 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { Li, Nav, Ol, Span } from "../../ui";
-
-export interface BreadcrumbsProps {
-  children: React.ReactNode;
-  separator?: React.ReactNode;
-  className?: string;
-}
-
-export interface BreadcrumbItemProps {
-  href?: string;
-  children: React.ReactNode;
-  /** Marks this item as the current page — renders as plain text, not link. */
-  current?: boolean;
-  className?: string;
-}
-
-/**
- * Breadcrumbs — navigation hierarchy showing the user's location.
- * Automatically adds separators between items.
- *
- * @example
- * <Breadcrumbs>
- *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
- *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
- *   <BreadcrumbItem current>Detail</BreadcrumbItem>
- * </Breadcrumbs>
- */
-export function Breadcrumbs({
-  children,
-  separator = "/",
-  className = "",
-}: BreadcrumbsProps) {
-  const items = React.Children.toArray(children);
-
-  return (
-    <Nav aria-label="Breadcrumb" className={className}>
-      <Ol className="flex items-center gap-2 text-sm flex-wrap">
-        {items.map((item, index) => (
-          <Li key={index} className="flex items-center gap-2">
-            {item}
-            {index < items.length - 1 && (
-              <Span
-                className="text-zinc-400 dark:text-zinc-500 select-none"
-                aria-hidden="true"
-              >
-                {separator}
-              </Span>
-            )}
-          </Li>
-        ))}
-      </Ol>
-    </Nav>
-  );
-}
-
-export function BreadcrumbItem({
-  href,
-  children,
-  current = false,
-  className = "",
-}: BreadcrumbItemProps) {
-  if (current || !href) {
-    return (
-      <Span
-        aria-current={current ? "page" : undefined}
-        className={`text-zinc-500 dark:text-zinc-400 ${className}`}
-      >
-        {children}
-      </Span>
-    );
-  }
-
-  return (
-    <Link
-      href={href}
-      className={`text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors ${className}`}
-    >
-      {children}
-    </Link>
-  );
-}