@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/layout/FooterLayout.tsx

@@ -1,215 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import React, { useState } from "react";
-import { ChevronDown } from "lucide-react";
-import {
-  BlockFooter,
-  Button,
-  Div,
-  Heading,
-  Li,
-  Row,
-  Span,
-  Text,
-  Ul,
-} from "../../ui";
-
-export interface FooterLinkGroup {
-  heading: string;
-  links: { label: string; href: string }[];
-}
-
-export interface FooterSocialLink {
-  platform: string;
-  href: string;
-  icon: React.ReactNode;
-  ariaLabel: string;
-}
-
-export interface TrustBarItem {
-  id: string;
-  icon: React.ReactNode;
-  title: string;
-  subtitle: string;
-  visible?: boolean;
-}
-
-export interface FooterLayoutProps {
-  brandName: string;
-  brandDescription: string;
-  socialLinks: FooterSocialLink[];
-  linkGroups: FooterLinkGroup[];
-  copyrightText: string;
-  madeInText?: string;
-  /** Optional newsletter subscription slot. */
-  newsletterSlot?: React.ReactNode;
-  newsletterEnabled?: boolean;
-  /** When true, renders the trust bar above the main footer content. */
-  showTrustBar?: boolean;
-  trustBarItems?: TrustBarItem[];
-  id?: string;
-}
-
-export function FooterLayout({
-  brandName,
-  brandDescription,
-  socialLinks,
-  linkGroups,
-  copyrightText,
-  madeInText,
-  newsletterSlot,
-  newsletterEnabled = true,
-  showTrustBar = false,
-  trustBarItems = [],
-  id = "footer",
-}: FooterLayoutProps) {
-  const [openGroups, setOpenGroups] = useState<Record<number, boolean>>({});
-  const toggleGroup = (idx: number) =>
-    setOpenGroups((prev) => ({ ...prev, [idx]: !prev[idx] }));
-
-  const visibleTrustItems = trustBarItems.filter(
-    (item) => item.visible !== false,
-  );
-
-  return (
-    <BlockFooter
-      id={id}
-      className="bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800"
-    >
-      {/* Trust bar */}
-      {showTrustBar && visibleTrustItems.length > 0 && (
-        <Div className="border-b border-zinc-200 dark:border-slate-800 py-6">
-          <Div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]">
-            <Row as="ul" wrap justify="center" gap="lg" className="lg:gap-10">
-              {visibleTrustItems.map((item) => (
-                <Li
-                  key={item.id}
-                  className="flex items-center gap-3 text-sm min-w-[160px]"
-                >
-                  <Span className="flex-shrink-0 text-primary-600 dark:text-secondary-400">
-                    {item.icon}
-                  </Span>
-                  <Span>
-                    <Span className="font-semibold text-zinc-900 dark:text-zinc-100">
-                      {item.title}
-                    </Span>
-                    <Span className="text-zinc-500 dark:text-zinc-400 text-xs">
-                      {item.subtitle}
-                    </Span>
-                  </Span>
-                </Li>
-              ))}
-            </Row>
-          </Div>
-        </Div>
-      )}
-
-      <Div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] py-10 lg:py-14">
-        <Div className="grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-16">
-          {/* Brand column */}
-          <Div className="lg:col-span-2 space-y-4">
-            <Heading level={5} className="text-zinc-900 dark:text-zinc-100">
-              {brandName}
-            </Heading>
-            <Text className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-sm">
-              {brandDescription}
-            </Text>
-
-            {/* Social links */}
-            {socialLinks.length > 0 && (
-              <Ul className="flex items-center gap-3">
-                {socialLinks.map((link) => (
-                  <Li key={link.platform}>
-                    <Link
-                      href={link.href}
-                      aria-label={link.ariaLabel}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center justify-center w-9 h-9 rounded-full border border-zinc-200 dark:border-slate-700 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:border-zinc-300 dark:hover:border-slate-600 transition-colors"
-                    >
-                      {link.icon}
-                    </Link>
-                  </Li>
-                ))}
-              </Ul>
-            )}
-
-            {/* Newsletter slot */}
-            {newsletterEnabled && newsletterSlot && (
-              <Div className="pt-2">{newsletterSlot}</Div>
-            )}
-          </Div>
-
-          {/* Link groups — desktop: columns, mobile: accordions */}
-          <Div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-3 gap-0 sm:gap-8">
-            {linkGroups.map((group, idx) => (
-              <Div key={idx}>
-                {/* Mobile accordion header */}
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => toggleGroup(idx)}
-                  className="sm:hidden flex items-center justify-between w-full py-3 border-b border-zinc-200 dark:border-slate-800 text-sm font-semibold text-zinc-900 dark:text-zinc-100"
-                >
-                  {group.heading}
-                  <ChevronDown
-                    className={`w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}`}
-                  />
-                </Button>
-
-                {/* Mobile content */}
-                <Ul
-                  className={`sm:hidden overflow-hidden transition-all duration-200 ${openGroups[idx] ? "max-h-96 py-3" : "max-h-0"} space-y-2.5`}
-                >
-                  {group.links.map((link) => (
-                    <Li key={link.href}>
-                      <Link
-                        href={link.href}
-                        className="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
-                      >
-                        {link.label}
-                      </Link>
-                    </Li>
-                  ))}
-                </Ul>
-
-                {/* Desktop column */}
-                <Div className="hidden sm:block">
-                  <Text className="text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-3">
-                    {group.heading}
-                  </Text>
-                  <Ul className="space-y-2.5">
-                    {group.links.map((link) => (
-                      <Li key={link.href}>
-                        <Link
-                          href={link.href}
-                          className="text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
-                        >
-                          {link.label}
-                        </Link>
-                      </Li>
-                    ))}
-                  </Ul>
-                </Div>
-              </Div>
-            ))}
-          </Div>
-        </Div>
-
-        {/* Bottom bar */}
-        <Div className="mt-10 pt-6 border-t border-zinc-200 dark:border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-zinc-600 dark:text-zinc-400">
-          <Text className="text-xs text-zinc-600 dark:text-zinc-400">
-            {copyrightText}
-          </Text>
-          {madeInText && (
-            <Text className="text-xs text-zinc-600 dark:text-zinc-400">
-              {madeInText}
-            </Text>
-          )}
-        </Div>
-      </Div>
-    </BlockFooter>
-  );
-}

package/src/features/layout/ListingLayout.tsx

@@ -1,383 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import { Aside, Button, Div, Nav, Span } from "../../ui";
-
-export interface ListingLayoutLabels {
-  filtersTitle?: string;
-  showFilters?: string;
-  hideFilters?: string;
-  clearAll?: string;
-  applyFilters?: string;
-  close?: string;
-}
-
-export interface ListingLayoutProps {
-  headerSlot?: ReactNode;
-  statusTabsSlot?: ReactNode;
-  filterContent?: ReactNode;
-  filterActiveCount?: number;
-  onFilterApply?: () => void;
-  onFilterClear?: () => void;
-  filterTitle?: string;
-  activeFiltersSlot?: ReactNode;
-  searchSlot?: ReactNode;
-  sortSlot?: ReactNode;
-  viewToggleSlot?: ReactNode;
-  actionsSlot?: ReactNode;
-  selectedCount?: number;
-  toolbarPaginationSlot?: ReactNode;
-  paginationSlot?: ReactNode;
-  children: ReactNode;
-  defaultSidebarOpen?: boolean;
-  className?: string;
-  errorSlot?: ReactNode;
-  isDashboard?: boolean;
-  labels?: ListingLayoutLabels;
-  bulkActionBarSlot?: ReactNode;
-}
-
-export function ListingLayout({
-  headerSlot,
-  statusTabsSlot,
-  filterContent,
-  filterActiveCount = 0,
-  onFilterApply,
-  onFilterClear,
-  filterTitle,
-  activeFiltersSlot,
-  searchSlot,
-  sortSlot,
-  viewToggleSlot,
-  actionsSlot,
-  selectedCount = 0,
-  toolbarPaginationSlot,
-  paginationSlot,
-  children,
-  defaultSidebarOpen = false,
-  className = "",
-  errorSlot,
-  isDashboard = false,
-  labels,
-  bulkActionBarSlot,
-}: ListingLayoutProps) {
-  const [sidebarOpen, setSidebarOpen] = useState(defaultSidebarOpen);
-  const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
-  const mobileOverlayRef = useRef<HTMLDivElement>(null);
-
-  const hasFilter = Boolean(filterContent);
-  const l = {
-    filtersTitle: labels?.filtersTitle ?? "Filters",
-    showFilters: labels?.showFilters ?? "Show filters",
-    hideFilters: labels?.hideFilters ?? "Hide filters",
-    clearAll: labels?.clearAll ?? "Clear all",
-    applyFilters: labels?.applyFilters ?? "Apply filters",
-    close: labels?.close ?? "Close",
-  };
-
-  const panelTitle = filterTitle ?? l.filtersTitle;
-
-  useEffect(() => {
-    if (!mobileFilterOpen) return;
-    const handle = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setMobileFilterOpen(false);
-    };
-    document.addEventListener("keydown", handle);
-    return () => document.removeEventListener("keydown", handle);
-  }, [mobileFilterOpen]);
-
-  useEffect(() => {
-    if (mobileFilterOpen) {
-      const w = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.overflow = "hidden";
-      document.body.style.paddingRight = `${w}px`;
-    } else {
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    };
-  }, [mobileFilterOpen]);
-
-  const handleMobileApply = () => {
-    onFilterApply?.();
-    setMobileFilterOpen(false);
-  };
-
-  return (
-    <Div
-      className={[
-        "w-full space-y-4",
-        toolbarPaginationSlot
-          ? selectedCount > 0
-            ? "pb-28 md:pb-0"
-            : "pb-12 md:pb-0"
-          : "",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      {headerSlot}
-
-      {statusTabsSlot && (
-        <Div className="overflow-x-auto touch-pan-x -mx-4 px-4 md:-mx-6 md:px-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          {statusTabsSlot}
-        </Div>
-      )}
-
-      <Div
-        className={[
-          "sticky z-20 -mx-4 px-4 md:-mx-6 md:px-6",
-          isDashboard ? "top-0" : "top-14 md:top-[120px]",
-          "bg-white/80 dark:bg-slate-950/80 backdrop-blur-md",
-          "border-b border-zinc-200/70 dark:border-slate-800/70",
-          "shadow-[0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
-          "py-2.5",
-        ].join(" ")}
-      >
-        <Div className="hidden md:flex items-center gap-2 min-w-0">
-          {hasFilter && (
-            <Button
-              type="button"
-              onClick={() => setSidebarOpen((prev) => !prev)}
-              aria-label={sidebarOpen ? l.hideFilters : l.showFilters}
-              aria-expanded={sidebarOpen}
-              variant="ghost"
-              size="sm"
-              className={[
-                "hidden lg:flex flex-shrink-0 items-center gap-1.5",
-                "rounded-full h-8 px-3 text-sm font-medium",
-                "border transition-all duration-150",
-                sidebarOpen
-                  ? "bg-primary/10 border-primary/30 text-primary dark:bg-primary/15 dark:border-primary/40"
-                  : "border-zinc-200 dark:border-slate-700 text-zinc-600 dark:text-slate-300 hover:border-zinc-300 dark:hover:border-slate-600 hover:bg-zinc-50 dark:hover:bg-slate-800/60",
-              ].join(" ")}
-            >
-              {l.filtersTitle}
-              {filterActiveCount > 0 && (
-                <Span className="inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white">
-                  {filterActiveCount}
-                </Span>
-              )}
-            </Button>
-          )}
-
-          {searchSlot && <Div className="flex-1 min-w-0">{searchSlot}</Div>}
-
-          <Div className="flex items-center gap-1.5 flex-shrink-0">
-            {sortSlot}
-            {viewToggleSlot && (
-              <Div className="flex items-center gap-0.5 rounded-full border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-0.5 shadow-sm">
-                {viewToggleSlot}
-              </Div>
-            )}
-            {actionsSlot}
-          </Div>
-
-          {toolbarPaginationSlot && (
-            <Div className="ml-auto flex-shrink-0 pl-3 border-l border-zinc-200/70 dark:border-slate-700/70">
-              {toolbarPaginationSlot}
-            </Div>
-          )}
-        </Div>
-
-        <Div className="flex flex-col gap-2 md:hidden">
-          <Div className="flex items-center gap-2">
-            {hasFilter && (
-              <Button
-                type="button"
-                onClick={() => setMobileFilterOpen(true)}
-                aria-label={l.filtersTitle}
-                variant="ghost"
-                size="sm"
-                className={[
-                  "flex-shrink-0 flex items-center gap-1.5",
-                  "rounded-full h-9 px-3 text-sm font-medium",
-                  "border border-zinc-200 dark:border-slate-700",
-                  "text-zinc-600 dark:text-slate-300",
-                  "hover:bg-zinc-50 dark:hover:bg-slate-800/60 transition-colors",
-                  filterActiveCount > 0
-                    ? "border-primary/40 bg-primary/5 text-primary"
-                    : "",
-                ].join(" ")}
-              >
-                {l.filtersTitle}
-                {filterActiveCount > 0 && (
-                  <Span className="inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white">
-                    {filterActiveCount}
-                  </Span>
-                )}
-              </Button>
-            )}
-            {searchSlot && <Div className="flex-1 min-w-0">{searchSlot}</Div>}
-          </Div>
-
-          {(sortSlot || viewToggleSlot || actionsSlot) && (
-            <Div className="flex items-stretch min-h-[44px] gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-              <Div className="flex items-center gap-2 flex-shrink-0 pb-px">
-                {sortSlot}
-                {viewToggleSlot}
-                {actionsSlot}
-              </Div>
-            </Div>
-          )}
-        </Div>
-
-        {selectedCount > 0 && bulkActionBarSlot && (
-          <Div className="hidden md:block pt-2 mt-2 border-t border-zinc-100 dark:border-slate-800">
-            {bulkActionBarSlot}
-          </Div>
-        )}
-      </Div>
-
-      <Div className="flex gap-4 lg:gap-6 items-start">
-        {hasFilter && (
-          <Aside
-            aria-label={panelTitle}
-            className={[
-              "hidden lg:block flex-shrink-0 self-start",
-              isDashboard ? "sticky top-16" : "sticky top-[176px]",
-              "transition-all duration-200 ease-in-out overflow-hidden",
-              sidebarOpen
-                ? "w-60 xl:w-64 2xl:w-72 opacity-100"
-                : "w-0 opacity-0 pointer-events-none",
-            ].join(" ")}
-          >
-            <Div className="w-60 xl:w-64 2xl:w-72 rounded-2xl overflow-hidden border border-zinc-200/80 dark:border-slate-700/60 bg-white dark:bg-slate-900 shadow-sm">
-              <Div className="flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-slate-800">
-                <Div className="font-semibold text-sm">{panelTitle}</Div>
-                {filterActiveCount > 0 && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={onFilterClear}
-                    className="text-xs text-primary hover:text-primary/80 hover:underline p-0 h-auto leading-none font-medium"
-                  >
-                    {l.clearAll}
-                  </Button>
-                )}
-              </Div>
-
-              <Div className="px-3 pt-5 pb-3 max-h-[calc(100vh-15rem)] overflow-y-auto space-y-4">
-                {filterContent}
-              </Div>
-
-              <Div className="px-3 pb-3 pt-2 border-t border-zinc-100 dark:border-slate-800">
-                <Button
-                  type="button"
-                  variant="primary"
-                  className="w-full rounded-xl bg-primary text-white py-2 px-3"
-                  onClick={onFilterApply}
-                >
-                  {l.applyFilters}
-                </Button>
-              </Div>
-            </Div>
-          </Aside>
-        )}
-
-        <Div className="flex-1 min-w-0 space-y-3">
-          {activeFiltersSlot}
-
-          {errorSlot ? (
-            errorSlot
-          ) : (
-            <>
-              {children}
-              {paginationSlot && <Div className="pt-2">{paginationSlot}</Div>}
-            </>
-          )}
-        </Div>
-      </Div>
-
-      {toolbarPaginationSlot && (
-        <Nav
-          aria-label="Pagination"
-          className={[
-            "fixed left-0 right-0 md:hidden",
-            isDashboard
-              ? "bottom-0"
-              : selectedCount > 0
-                ? "bottom-28"
-                : "bottom-14",
-            "z-[39]",
-            "bg-white/95 dark:bg-slate-950/95 backdrop-blur-md",
-            "shadow-[0_-2px_8px_rgba(0,0,0,0.06)] dark:shadow-[0_-2px_8px_rgba(0,0,0,0.20)]",
-            "h-10 flex items-center justify-center px-3 overflow-x-auto pb-px",
-            "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-          ].join(" ")}
-        >
-          {toolbarPaginationSlot}
-        </Nav>
-      )}
-
-      {hasFilter && mobileFilterOpen && (
-        <>
-          <Div
-            className="fixed inset-0 z-40 bg-black/40 lg:hidden"
-            onClick={() => setMobileFilterOpen(false)}
-            aria-hidden="true"
-          />
-
-          <Div
-            ref={mobileOverlayRef}
-            className="fixed inset-0 z-50 flex flex-col lg:hidden bg-white dark:bg-slate-950"
-            role="dialog"
-            aria-modal="true"
-            aria-label={panelTitle}
-          >
-            <Div className="flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0">
-              <Div className="font-semibold">
-                {panelTitle}
-                {filterActiveCount > 0 && (
-                  <Span className="ml-2 inline-flex items-center justify-center w-5 h-5 text-[11px] font-bold rounded-full bg-primary text-white">
-                    {filterActiveCount}
-                  </Span>
-                )}
-              </Div>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => setMobileFilterOpen(false)}
-                aria-label={l.close}
-                className="rounded-full w-8 h-8 p-0 flex items-center justify-center hover:bg-zinc-100 dark:hover:bg-slate-800"
-              >
-                x
-              </Button>
-            </Div>
-
-            <Div className="flex-1 overflow-y-auto px-4 pt-6 pb-4 space-y-4">
-              {filterContent}
-            </Div>
-
-            <Div className="flex-shrink-0 flex gap-3 px-4 py-4 border-t border-zinc-100 dark:border-slate-800 bg-white dark:bg-slate-950">
-              <Button
-                type="button"
-                variant="outline"
-                className="flex-1 rounded-xl bg-zinc-200 dark:bg-slate-700 py-2 px-3"
-                onClick={() => {
-                  onFilterClear?.();
-                }}
-              >
-                {l.clearAll}
-              </Button>
-              <Button
-                type="button"
-                variant="primary"
-                className="flex-1 rounded-xl bg-primary text-white py-2 px-3"
-                onClick={handleMobileApply}
-              >
-                {l.applyFilters}
-              </Button>
-            </Div>
-          </Div>
-        </>
-      )}
-    </Div>
-  );
-}

package/src/features/layout/LocaleSwitcher.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import { Select } from "../../ui";
-
-export interface LocaleSwitcherOption {
-  value: string;
-  label: string;
-}
-
-export interface LocaleSwitcherProps {
-  /** Currently active locale. */
-  locale: string;
-  /** Available locale options. */
-  options: LocaleSwitcherOption[];
-  /** Called when the user selects a different locale. */
-  onChange: (locale: string) => void;
-  /** ARIA label for the select element. */
-  ariaLabel?: string;
-  className?: string;
-}
-
-/**
- * LocaleSwitcher — generic locale selector.
- *
- * Renders a minimal `<select>` element. The parent is responsible for
- * calling `router.replace` with the chosen locale (project-specific routing).
- */
-export function LocaleSwitcher({
-  locale,
-  options,
-  onChange,
-  ariaLabel = "Switch language",
-  className = "",
-}: LocaleSwitcherProps) {
-  return (
-    <Select
-      value={locale}
-      onChange={onChange}
-      options={options}
-      aria-label={ariaLabel}
-      className={className}
-    />
-  );
-}