@mohasinac/appkit 2.1.3 → 2.3.0

package/src/ui/components/StatsGrid.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import React from "react";
-
-import { Text } from "./Typography";
-import { classNames } from "../style.helper";
-
-export interface StatItem {
-  label: string;
-  value: number | string;
-  icon?: React.ReactNode;
-  colorClass?: string;
-}
-
-export interface StatsGridProps {
-  stats: StatItem[];
-  columns?: 2 | 3 | 4;
-  className?: string;
-}
-
-const columnsClass: Record<2 | 3 | 4, string> = {
-  2: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-  3: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3",
-  4: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
-};
-
-export function StatsGrid({ stats, columns = 3, className }: StatsGridProps) {
-  return (
-    <div className={classNames(columnsClass[columns], className)}>
-      {stats.map((stat, i) => (
-        <div
-          key={`${stat.label}-${i}`}
-          className="rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900"
-        >
-          <div className="flex items-center justify-between">
-            <div>
-              <Text className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
-                {stat.label}
-              </Text>
-              <Text className="mt-1 text-3xl font-bold">{stat.value}</Text>
-            </div>
-            {stat.icon && (
-              <div
-                className={classNames(
-                  stat.colorClass ?? "text-zinc-400 dark:text-zinc-500",
-                )}
-              >
-                {stat.icon}
-              </div>
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/ui/components/StatusBadge.tsx

@@ -1,130 +0,0 @@
-import { Badge } from "./Badge";
-
-/**
- * StatusBadge — semantic color map for order/payment/review/ticket status strings.
- *
- * Wraps @mohasinac/ui Badge with a pre-defined status → variant mapping.
- * No app-specific imports.
- */
-
-export type OrderStatus =
-  | "pending"
-  | "confirmed"
-  | "processing"
-  | "shipped"
-  | "delivered"
-  | "cancelled"
-  | "refunded"
-  | "failed";
-
-export type PaymentStatus =
-  | "pending"
-  | "paid"
-  | "failed"
-  | "refunded"
-  | "partially_refunded";
-
-export type ReviewStatus = "pending" | "approved" | "rejected";
-
-export type TicketStatus = "open" | "in_progress" | "resolved" | "closed";
-
-export type GenericStatus =
-  | "active"
-  | "inactive"
-  | "pending"
-  | "approved"
-  | "rejected"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info";
-
-export type StatusBadgeStatus =
-  | OrderStatus
-  | PaymentStatus
-  | ReviewStatus
-  | TicketStatus
-  | GenericStatus;
-
-export interface StatusBadgeProps {
-  status: StatusBadgeStatus;
-  label?: string;
-  className?: string;
-}
-
-type BadgeVariantKey =
-  | "active"
-  | "inactive"
-  | "pending"
-  | "approved"
-  | "rejected"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info"
-  | "default";
-
-const STATUS_TO_VARIANT: Record<string, BadgeVariantKey> = {
-  // Generic
-  active: "active",
-  inactive: "inactive",
-  pending: "pending",
-  approved: "approved",
-  rejected: "rejected",
-  success: "success",
-  warning: "warning",
-  danger: "danger",
-  info: "info",
-  // Order
-  confirmed: "success",
-  processing: "info",
-  shipped: "info",
-  delivered: "success",
-  cancelled: "danger",
-  refunded: "warning",
-  failed: "danger",
-  // Payment
-  paid: "success",
-  partially_refunded: "warning",
-  // Review (pending/approved/rejected already covered)
-  // Ticket
-  open: "warning",
-  in_progress: "info",
-  resolved: "success",
-  closed: "inactive",
-};
-
-const STATUS_LABELS: Record<string, string> = {
-  active: "Active",
-  inactive: "Inactive",
-  pending: "Pending",
-  approved: "Approved",
-  rejected: "Rejected",
-  success: "Success",
-  warning: "Warning",
-  danger: "Danger",
-  info: "Info",
-  confirmed: "Confirmed",
-  processing: "Processing",
-  shipped: "Shipped",
-  delivered: "Delivered",
-  cancelled: "Cancelled",
-  refunded: "Refunded",
-  failed: "Failed",
-  paid: "Paid",
-  partially_refunded: "Partially Refunded",
-  open: "Open",
-  in_progress: "In Progress",
-  resolved: "Resolved",
-  closed: "Closed",
-};
-
-export function StatusBadge({ status, label, className }: StatusBadgeProps) {
-  const variant = STATUS_TO_VARIANT[status] ?? "default";
-  const displayLabel = label ?? STATUS_LABELS[status] ?? status;
-  return (
-    <Badge variant={variant} className={className}>
-      {displayLabel}
-    </Badge>
-  );
-}

package/src/ui/components/StepperNav.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import { Li, Nav, Ol } from "./Semantic";
-import { Span } from "./Typography";
-import { classNames } from "../style.helper";
-
-export interface StepperNavStep {
-  number: number;
-  label: string;
-}
-
-export interface StepperNavProps {
-  steps: StepperNavStep[];
-  currentStep: number;
-  className?: string;
-}
-
-export function StepperNav({ steps, currentStep, className }: StepperNavProps) {
-  return (
-    <Nav aria-label="Steps" className={classNames("mb-8", className)}>
-      <Ol className="flex items-center gap-0">
-        {steps.map((step, i) => {
-          const isComplete = step.number < currentStep;
-          const isActive = step.number === currentStep;
-          const isLast = i === steps.length - 1;
-
-          return (
-            <Li key={step.number} className="flex flex-1 items-center">
-              <div className="flex flex-shrink-0 items-center gap-2">
-                <div
-                  className={classNames(
-                    "flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors",
-                    isComplete
-                      ? "border-primary bg-primary text-white"
-                      : isActive
-                        ? "border-primary bg-transparent text-primary"
-                        : "border-zinc-300 text-zinc-500 dark:border-slate-700 dark:text-zinc-400",
-                  )}
-                >
-                  {isComplete ? (
-                    <svg
-                      className="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      aria-hidden="true"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2.5}
-                        d="M5 13l4 4L19 7"
-                      />
-                    </svg>
-                  ) : (
-                    step.number
-                  )}
-                </div>
-                <Span
-                  className={classNames(
-                    "hidden text-sm font-medium sm:block",
-                    isActive
-                      ? "text-primary"
-                      : isComplete
-                        ? "text-zinc-900 dark:text-zinc-100"
-                        : "text-zinc-500 dark:text-zinc-400",
-                  )}
-                >
-                  {step.label}
-                </Span>
-              </div>
-
-              {!isLast && (
-                <div
-                  className={classNames(
-                    "mx-3 h-0.5 flex-1 transition-colors",
-                    isComplete
-                      ? "bg-primary"
-                      : "bg-zinc-200 dark:bg-slate-700",
-                  )}
-                />
-              )}
-            </Li>
-          );
-        })}
-      </Ol>
-    </Nav>
-  );
-}

package/src/ui/components/SummaryCard.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import React from "react";
-
-import { Divider } from "./Divider";
-import { Span } from "./Typography";
-import { classNames } from "../style.helper";
-
-export interface SummaryLine {
-  label: string;
-  value: string;
-  muted?: boolean;
-}
-
-export interface SummaryCardProps {
-  lines: SummaryLine[];
-  total: { label: string; value: string };
-  action?: React.ReactNode;
-  className?: string;
-}
-
-export function SummaryCard({
-  lines,
-  total,
-  action,
-  className,
-}: SummaryCardProps) {
-  return (
-    <div
-      className={classNames(
-        "space-y-4 rounded-xl border border-zinc-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900",
-        className,
-      )}
-    >
-      <div className="space-y-2">
-        {lines.map((line, i) => (
-          <div key={i} className="flex items-center justify-between text-sm">
-            <Span className="text-zinc-500 dark:text-zinc-400">
-              {line.label}
-            </Span>
-            <Span
-              className={
-                line.muted
-                  ? "text-zinc-500 dark:text-zinc-400"
-                  : "text-zinc-900 dark:text-zinc-100"
-              }
-            >
-              {line.value}
-            </Span>
-          </div>
-        ))}
-      </div>
-
-      <Divider />
-
-      <div className="flex items-center justify-between">
-        <Span className="font-bold text-zinc-900 dark:text-zinc-100">
-          {total.label}
-        </Span>
-        <Span className="text-lg font-bold text-primary">{total.value}</Span>
-      </div>
-
-      {action && <div>{action}</div>}
-    </div>
-  );
-}

package/src/ui/components/TabStrip.tsx

@@ -1,142 +0,0 @@
-// appkit/src/ui/components/TabStrip.tsx
-"use client";
-import React, { useEffect } from "react";
-import { Span } from "./Typography";
-import { useVisibleItems } from "../../react/hooks/useVisibleItems";
-import { FLUID_GRID_MIN_WIDTHS } from "../../tokens";
-
-export interface TabStripTab {
-  key: string;
-  label: string;
-  badge?: number;
-  disabled?: boolean;
-}
-
-export interface TabStripProps {
-  tabs: TabStripTab[];
-  activeKey: string;
-  onChange: (key: string) => void;
-  /** Minimum width per tab in pixels (default: FLUID_GRID_MIN_WIDTHS.tabItem = 100) */
-  minTabWidth?: number;
-  className?: string;
-}
-
-/**
- * `TabStrip` — a horizontally scrollable tab bar that shows as many tabs as
- * fit the container width. Arrow buttons appear automatically when tabs overflow.
- * The active tab is always scrolled into the visible window.
- *
- * @example
- * ```tsx
- * <TabStrip
- *   tabs={[
- *     { key: "all", label: "All" },
- *     { key: "active", label: "Active", badge: 3 },
- *     { key: "archived", label: "Archived", disabled: true },
- *   ]}
- *   activeKey={activeTab}
- *   onChange={setActiveTab}
- * />
- * ```
- */
-export function TabStrip({
-  tabs,
-  activeKey,
-  onChange,
-  minTabWidth = FLUID_GRID_MIN_WIDTHS.tabItem,
-  className,
-}: TabStripProps) {
-  const {
-    containerRef,
-    visibleCount,
-    hasOverflow,
-    scrollLeft,
-    scrollRight,
-    setScrollOffset,
-    scrollOffset,
-    canScrollLeft,
-    canScrollRight,
-  } = useVisibleItems({
-    total: tabs.length,
-    minItemWidth: minTabWidth,
-    gap: 0,
-  });
-
-  // Keep active tab scrolled into the visible window
-  useEffect(() => {
-    const idx = tabs.findIndex((t) => t.key === activeKey);
-    if (idx < 0) return;
-    if (idx < scrollOffset) {
-      setScrollOffset(idx);
-    } else if (idx >= scrollOffset + visibleCount) {
-      setScrollOffset(idx - visibleCount + 1);
-    }
-  }, [activeKey, scrollOffset, visibleCount, tabs, setScrollOffset]);
-
-  const visible = tabs.slice(scrollOffset, scrollOffset + visibleCount);
-
-  return (
-    <div
-      ref={containerRef as React.RefObject<HTMLDivElement>}
-      role="tablist"
-      className={[
-        "flex items-end border-b border-zinc-200 dark:border-zinc-700",
-        className ?? "",
-      ]
-        .join(" ")
-        .trim()}
-    >
-      {hasOverflow && (
-        <button
-          type="button"
-          onClick={scrollLeft}
-          disabled={!canScrollLeft}
-          aria-label="Previous tabs"
-          className="flex-none h-12 w-9 flex items-center justify-center text-zinc-500 disabled:opacity-30 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
-        >
-          ‹
-        </button>
-      )}
-
-      {visible.map((tab) => (
-        <button
-          key={tab.key}
-          type="button"
-          role="tab"
-          aria-selected={tab.key === activeKey}
-          aria-disabled={tab.disabled}
-          onClick={() => !tab.disabled && onChange(tab.key)}
-          style={{ minWidth: `${minTabWidth}px` }}
-          className={[
-            "flex-1 h-12 px-4 text-sm font-medium whitespace-nowrap border-b-2 transition-colors",
-            tab.key === activeKey
-              ? "border-primary-500 text-primary-600 dark:text-primary-400"
-              : "border-transparent text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100",
-            tab.disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer",
-          ]
-            .join(" ")
-            .trim()}
-        >
-          {tab.label}
-          {tab.badge != null && tab.badge > 0 && (
-            <Span className="ml-1.5 inline-flex items-center justify-center h-4 min-w-[1rem] px-1 rounded-full text-[10px] bg-primary-100 dark:bg-primary-900/40 text-primary-600 dark:text-primary-400">
-              {tab.badge > 99 ? "99+" : tab.badge}
-            </Span>
-          )}
-        </button>
-      ))}
-
-      {hasOverflow && (
-        <button
-          type="button"
-          onClick={scrollRight}
-          disabled={!canScrollRight}
-          aria-label="Next tabs"
-          className="flex-none h-12 w-9 flex items-center justify-center text-zinc-500 disabled:opacity-30 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
-        >
-          ›
-        </button>
-      )}
-    </div>
-  );
-}

package/src/ui/components/TablePagination.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import React from "react";
-import { Pagination } from "./Pagination";
-import { Select } from "./Select";
-import { Span, Text } from "./Typography";
-
-const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;
-
-export interface TablePaginationLabels {
-  paginationLabel?: string;
-  showing?: string;
-  of?: string;
-  results?: string;
-  perPage?: string;
-}
-
-export interface TablePaginationProps {
-  currentPage: number;
-  totalPages: number;
-  pageSize: number;
-  total: number;
-  onPageChange: (page: number) => void;
-  onPageSizeChange?: (pageSize: number) => void;
-  pageSizeOptions?: readonly number[];
-  isLoading?: boolean;
-  className?: string;
-  compact?: boolean;
-  labels?: TablePaginationLabels;
-}
-
-export function TablePagination({
-  currentPage,
-  totalPages,
-  pageSize,
-  total,
-  onPageChange,
-  onPageSizeChange,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-  isLoading = false,
-  className = "",
-  compact = false,
-  labels,
-}: TablePaginationProps) {
-  const l = {
-    paginationLabel: labels?.paginationLabel ?? "Pagination",
-    showing: labels?.showing ?? "Showing",
-    of: labels?.of ?? "of",
-    results: labels?.results ?? "results",
-    perPage: labels?.perPage ?? "Per page",
-  };
-
-  if (compact) {
-    return (
-      <div
-        role="navigation"
-        aria-label={l.paginationLabel}
-        className={`flex items-center gap-0.5 ${className}`}
-      >
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={onPageChange}
-          disabled={isLoading}
-          size="sm"
-          maxVisible={5}
-        />
-      </div>
-    );
-  }
-
-  const from = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
-  const to = Math.min(currentPage * pageSize, total);
-
-  return (
-    <div
-      role="navigation"
-      aria-label={l.paginationLabel}
-      className={[
-        "flex flex-col sm:flex-row items-center gap-3 px-4 py-3",
-        "border-t border-zinc-100 dark:border-slate-800/80",
-        className,
-      ].join(" ")}
-    >
-      <Text
-        size="xs"
-        variant="none"
-        className="text-zinc-400 dark:text-slate-500 tabular-nums sm:mr-auto"
-      >
-        {l.showing}{" "}
-        <Span className="font-semibold text-zinc-600 dark:text-slate-300">
-          {from}–{to}
-        </Span>{" "}
-        {l.of}{" "}
-        <Span className="font-semibold text-zinc-600 dark:text-slate-300">
-          {new Intl.NumberFormat().format(total)}
-        </Span>{" "}
-        {l.results}
-      </Text>
-
-      <div className="rounded-xl p-0.5 bg-zinc-100 dark:bg-slate-800 inline-flex">
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={onPageChange}
-          disabled={isLoading}
-        />
-      </div>
-
-      {onPageSizeChange && (
-        <div className="flex items-center gap-1.5 sm:ml-1">
-          <label
-            htmlFor="page-size-select"
-            className="text-xs text-zinc-400 dark:text-slate-500 whitespace-nowrap"
-          >
-            {l.perPage}
-          </label>
-          <Select
-            id="page-size-select"
-            value={String(pageSize)}
-            onChange={(value) => onPageSizeChange(Number(value))}
-            disabled={isLoading}
-            aria-label={l.perPage}
-            className="text-xs h-7 py-0 px-2 rounded-lg"
-            options={pageSizeOptions.map((s) => ({
-              value: String(s),
-              label: String(s),
-            }))}
-          />
-        </div>
-      )}
-    </div>
-  );
-}