@mohasinac/appkit 2.1.3 → 2.2.0

package/src/ui/components/Pagination.tsx

@@ -1,182 +0,0 @@
-"use client";
-
-import React from "react";
-import type { PaginationConfig } from "../../contracts";
-import { DEFAULT_PAGINATION_CONFIG } from "../../contracts";
-
-/**
- * Pagination — smart ellipsis pagination with prev/next chevrons.
- *
- * Accepts either individual props OR a `paginationConfig` object
- * (merged with DEFAULT_PAGINATION_CONFIG). Individual props take precedence.
- */
-
-export interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  /**
-   * Composable pagination config. Merged with DEFAULT_PAGINATION_CONFIG.
-   * Individual flat props override this.
-   */
-  paginationConfig?: Partial<PaginationConfig>;
-  /** Max visible page buttons before ellipsis kicks in. Default: 7 */
-  maxVisible?: number;
-  showFirstLast?: boolean;
-  showPrevNext?: boolean;
-  disabled?: boolean;
-  size?: "sm" | "md" | "lg";
-  className?: string;
-}
-
-function getPageNumbers(
-  currentPage: number,
-  totalPages: number,
-  maxVisible: number,
-): (number | "...")[] {
-  if (totalPages <= maxVisible) {
-    return Array.from({ length: totalPages }, (_, i) => i + 1);
-  }
-
-  const pages: (number | "...")[] = [];
-  const halfVisible = Math.floor(maxVisible / 2);
-
-  let startPage = Math.max(1, currentPage - halfVisible);
-  let endPage = Math.min(totalPages, currentPage + halfVisible);
-
-  if (currentPage <= halfVisible) endPage = maxVisible;
-  if (currentPage >= totalPages - halfVisible)
-    startPage = totalPages - maxVisible + 1;
-
-  if (startPage > 1) {
-    pages.push(1);
-    if (startPage > 2) pages.push("...");
-  }
-  for (let i = startPage; i <= endPage; i++) pages.push(i);
-  if (endPage < totalPages) {
-    if (endPage < totalPages - 1) pages.push("...");
-    pages.push(totalPages);
-  }
-  return pages;
-}
-
-const SIZE_CLASSES = {
-  sm: "text-xs px-2 py-1 min-w-[28px]",
-  md: "text-sm px-3 py-1.5 min-w-[36px]",
-  lg: "text-base px-4 py-2 min-w-[44px]",
-} as const;
-
-export function Pagination({
-  currentPage,
-  totalPages,
-  onPageChange,
-  paginationConfig,
-  maxVisible: maxVisibleProp,
-  showFirstLast: showFirstLastProp,
-  showPrevNext: showPrevNextProp,
-  disabled = false,
-  size: sizeProp,
-  className = "",
-}: PaginationProps) {
-  const resolved = { ...DEFAULT_PAGINATION_CONFIG, ...paginationConfig };
-  const maxVisible = maxVisibleProp ?? resolved.maxVisible;
-  const showFirstLast = showFirstLastProp ?? resolved.showFirstLast;
-  const showPrevNext = showPrevNextProp ?? resolved.showPrevNext;
-  const size = sizeProp ?? resolved.size;
-  const handle = (page: number) => {
-    if (disabled || page < 1 || page > totalPages || page === currentPage)
-      return;
-    onPageChange(page);
-  };
-
-  const btnClass = (active: boolean, off: boolean) => {
-    const base = `${SIZE_CLASSES[size]} rounded border font-medium transition-colors`;
-    if (off)
-      return `${base} bg-zinc-100 dark:bg-slate-800 opacity-50 text-zinc-400 dark:text-zinc-500 border-zinc-200 dark:border-slate-700 cursor-not-allowed`;
-    if (active)
-      return `${base} bg-primary-600 text-white border-primary-600 cursor-default`;
-    return `${base} bg-white dark:bg-slate-900 text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-slate-700 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:border-zinc-300 dark:hover:border-slate-600 cursor-pointer`;
-  };
-
-  const pages = getPageNumbers(currentPage, totalPages, maxVisible);
-
-  return (
-    <nav
-      className={`flex items-center gap-1 ${className}`}
-      aria-label="Pagination"
-    >
-      {showFirstLast && (
-        <button
-          type="button"
-          className={btnClass(false, disabled || currentPage === 1)}
-          onClick={() => handle(1)}
-          disabled={disabled || currentPage === 1}
-          aria-label="First page"
-        >
-          «
-        </button>
-      )}
-      {showPrevNext && (
-        <button
-          type="button"
-          className={btnClass(false, disabled || currentPage === 1)}
-          onClick={() => handle(currentPage - 1)}
-          disabled={disabled || currentPage === 1}
-          aria-label="Previous page"
-        >
-          ‹
-        </button>
-      )}
-
-      {pages.map((page, i) =>
-        page === "..." ? (
-          <span
-            key={`ellipsis-${i}`}
-            className={`${SIZE_CLASSES[size]} text-zinc-400 dark:text-zinc-500 text-center`}
-            aria-hidden="true"
-          >
-            …
-          </span>
-        ) : (
-          <button
-            key={page}
-            type="button"
-            className={btnClass(
-              page === currentPage,
-              disabled && page !== currentPage,
-            )}
-            onClick={() => handle(page)}
-            disabled={disabled}
-            aria-label={`Page ${page}`}
-            aria-current={page === currentPage ? "page" : undefined}
-          >
-            {page}
-          </button>
-        ),
-      )}
-
-      {showPrevNext && (
-        <button
-          type="button"
-          className={btnClass(false, disabled || currentPage === totalPages)}
-          onClick={() => handle(currentPage + 1)}
-          disabled={disabled || currentPage === totalPages}
-          aria-label="Next page"
-        >
-          ›
-        </button>
-      )}
-      {showFirstLast && (
-        <button
-          type="button"
-          className={btnClass(false, disabled || currentPage === totalPages)}
-          onClick={() => handle(totalPages)}
-          disabled={disabled || currentPage === totalPages}
-          aria-label="Last page"
-        >
-          »
-        </button>
-      )}
-    </nav>
-  );
-}

package/src/ui/components/PriceDisplay.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import { Span } from "./Typography";
-import { Row } from "./Layout";
-
-export interface PriceDisplayProps {
-  amount: number;
-  currency?: string;
-  originalAmount?: number;
-  variant?: "compact" | "detail";
-  className?: string;
-}
-
-function formatCurrency(amount: number, currency: string): string {
-  return new Intl.NumberFormat("en-IN", {
-    style: "currency",
-    currency,
-    maximumFractionDigits: 2,
-  }).format(amount);
-}
-
-function formatPercent(value: number): string {
-  return `${Math.round(value * 100)}%`;
-}
-
-export function PriceDisplay({
-  amount,
-  currency = "INR",
-  originalAmount,
-  variant = "compact",
-  className,
-}: PriceDisplayProps) {
-  const hasDiscount = originalAmount !== undefined && originalAmount > amount;
-  const discountPct = hasDiscount
-    ? (originalAmount - amount) / originalAmount
-    : 0;
-
-  const priceClass =
-    variant === "detail"
-      ? "text-xl font-bold text-primary"
-      : "text-base font-bold text-primary";
-
-  const originalClass =
-    variant === "detail"
-      ? "text-sm text-zinc-400 line-through dark:text-zinc-500"
-      : "text-xs text-zinc-400 line-through dark:text-zinc-500";
-
-  return (
-    <Row wrap align="baseline" gap="xs" className={className}>
-      <Span className={priceClass}>{formatCurrency(amount, currency)}</Span>
-      {hasDiscount && (
-        <>
-          <Span className={originalClass}>
-            {formatCurrency(originalAmount, currency)}
-          </Span>
-          <Span className="rounded bg-emerald-100 px-1 py-0.5 text-xs font-semibold text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
-            -{formatPercent(discountPct)}
-          </Span>
-        </>
-      )}
-    </Row>
-  );
-}

package/src/ui/components/Progress.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import React from "react";
-import { Span } from "./Typography";
-
-/**
- * Progress / IndeterminateProgress — deterministic and animated loading bars.
- *
- * Extracted from src/components/ui/Progress.tsx for @mohasinac/ui.
- * Theme values inlined; styled-jsx replaced with plain <style> element.
- */
-
-// Inlined from THEME_CONSTANTS
-const TEXT_PRIMARY = "text-zinc-900 dark:text-zinc-50";
-const TEXT_SECONDARY = "text-zinc-500 dark:text-zinc-400";
-const BG_SECONDARY = "bg-zinc-50 dark:bg-slate-900";
-const FLEX_BETWEEN = "flex items-center justify-between";
-const INDETERMINATE_CSS = `
-@keyframes appkit-progress-indeterminate {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(350%); }
-}
-.appkit-progress-indeterminate {
-  animation: appkit-progress-indeterminate 1.5s ease-in-out infinite;
-}
-`;
-
-export interface ProgressProps {
-  value: number;
-  max?: number;
-  variant?: "primary" | "success" | "warning" | "error";
-  size?: "sm" | "md" | "lg";
-  label?: string;
-  showValue?: boolean;
-  className?: string;
-}
-
-export function Progress({
-  value,
-  max = 100,
-  variant = "primary",
-  size = "md",
-  label,
-  showValue = false,
-  className = "",
-}: ProgressProps) {
-  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-
-  const sizeClasses: Record<NonNullable<ProgressProps["size"]>, string> = {
-    sm: "h-1",
-    md: "h-2",
-    lg: "h-3",
-  };
-
-  const variantClasses: Record<
-    NonNullable<ProgressProps["variant"]>,
-    string
-  > = {
-    primary: "bg-primary",
-    success: "bg-green-600 dark:bg-green-500",
-    warning: "bg-yellow-600 dark:bg-yellow-500",
-    error: "bg-red-600 dark:bg-red-500",
-  };
-
-  return (
-    <div className={className}>
-      {(label || showValue) && (
-        <div className={`${FLEX_BETWEEN} mb-2`}>
-          {label && (
-            <Span className={`text-sm font-medium ${TEXT_PRIMARY}`}>
-              {label}
-            </Span>
-          )}
-          {showValue && (
-            <Span className={`text-sm font-medium ${TEXT_SECONDARY}`}>
-              {Math.round(percentage)}%
-            </Span>
-          )}
-        </div>
-      )}
-
-      <div
-        className={`w-full ${sizeClasses[size]} rounded-full overflow-hidden ${BG_SECONDARY}`}
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={max}
-        aria-label={label || `Progress: ${Math.round(percentage)}%`}
-      >
-        <div
-          className={`h-full ${variantClasses[variant]} transition-all duration-300 ease-in-out rounded-full`}
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-    </div>
-  );
-}
-
-// ─── IndeterminateProgress ─────────────────────────────────────────────────
-
-export interface IndeterminateProgressProps {
-  variant?: "primary" | "success" | "warning" | "error";
-  size?: "sm" | "md" | "lg";
-  label?: string;
-  className?: string;
-}
-
-export function IndeterminateProgress({
-  variant = "primary",
-  size = "md",
-  label,
-  className = "",
-}: IndeterminateProgressProps) {
-  const sizeClasses: Record<
-    NonNullable<IndeterminateProgressProps["size"]>,
-    string
-  > = {
-    sm: "h-1",
-    md: "h-2",
-    lg: "h-3",
-  };
-
-  const variantClasses: Record<
-    NonNullable<IndeterminateProgressProps["variant"]>,
-    string
-  > = {
-    primary: "bg-primary",
-    success: "bg-green-600 dark:bg-green-500",
-    warning: "bg-yellow-600 dark:bg-yellow-500",
-    error: "bg-red-600 dark:bg-red-500",
-  };
-
-  return (
-    <div className={className}>
-      <style dangerouslySetInnerHTML={{ __html: INDETERMINATE_CSS }} />
-      {label && (
-        <Span className={`block text-sm font-medium mb-2 ${TEXT_PRIMARY}`}>
-          {label}
-        </Span>
-      )}
-
-      <div
-        className={`w-full ${sizeClasses[size]} rounded-full overflow-hidden ${BG_SECONDARY} relative`}
-        role="progressbar"
-        aria-label={label || "Loading..."}
-      >
-        <div
-          className={`absolute inset-0 ${variantClasses[variant]} appkit-progress-indeterminate rounded-full`}
-          style={{ width: "40%" }}
-        />
-      </div>
-    </div>
-  );
-}

package/src/ui/components/RatingDisplay.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { Span } from "./Typography";
-import { classNames } from "../style.helper";
-
-const sizeClass: Record<"sm" | "md" | "lg", string> = {
-  sm: "h-4 w-4",
-  md: "h-5 w-5",
-  lg: "h-6 w-6",
-};
-
-export interface RatingDisplayProps {
-  rating: number;
-  maxRating?: number;
-  size?: "sm" | "md" | "lg";
-  showValue?: boolean;
-  className?: string;
-}
-
-export function RatingDisplay({
-  rating,
-  maxRating = 5,
-  size = "sm",
-  showValue = false,
-  className,
-}: RatingDisplayProps) {
-  const starSize = sizeClass[size];
-
-  return (
-    <div className={classNames("flex items-center gap-1", className)}>
-      <div className="flex">
-        {Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => (
-          <svg
-            key={star}
-            className={classNames(
-              starSize,
-              star <= rating
-                ? "text-amber-400 dark:text-secondary-500"
-                : "text-zinc-300 dark:text-zinc-700",
-            )}
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            aria-hidden="true"
-          >
-            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-          </svg>
-        ))}
-      </div>
-      {showValue && (
-        <Span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
-          {rating.toFixed(1)}
-        </Span>
-      )}
-    </div>
-  );
-}

package/src/ui/components/Select.tsx

@@ -1,221 +0,0 @@
-"use client";
-
-import React, { useCallback, useEffect, useId, useRef, useState } from "react";
-import { Check, ChevronDown } from "lucide-react";
-import { Label, Span, Text } from "./Typography";
-import { Ul, Li } from "./Semantic";
-import { Button } from "./Button";
-
-/**
- * Select — accessible combobox with label, error state, and disabled support.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- */
-
-export interface SelectOption<V = string> {
-  label: string;
-  value: V;
-  disabled?: boolean;
-}
-
-export interface SelectProps<V extends string = string> {
-  options: SelectOption<V>[];
-  value?: V;
-  onChange?: (value: V) => void;
-  placeholder?: string;
-  label?: string;
-  error?: string;
-  disabled?: boolean;
-  required?: boolean;
-  className?: string;
-  id?: string;
-}
-
-export function Select<V extends string = string>({
-  options,
-  value,
-  onChange,
-  placeholder = "Select…",
-  label,
-  error,
-  disabled = false,
-  required,
-  className = "",
-  id: externalId,
-}: SelectProps<V>) {
-  const generatedId = useId();
-  const id = externalId ?? generatedId;
-  const [open, setOpen] = useState(false);
-  const [openUp, setOpenUp] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  const selected = options.find((o) => o.value === value);
-
-  const toggle = useCallback(() => {
-    if (!disabled) {
-      if (!open && ref.current) {
-        const rect = ref.current.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        setOpenUp(spaceBelow < 160 && spaceAbove > spaceBelow);
-      }
-      setOpen((v) => !v);
-    }
-  }, [disabled, open]);
-
-  const handleSelect = useCallback(
-    (val: V) => {
-      onChange?.(val);
-      setOpen(false);
-    },
-    [onChange],
-  );
-
-  // Close on outside click
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    if (open) document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-
-  // Keyboard navigation
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Escape") {
-        setOpen(false);
-        return;
-      }
-      if (e.key === "Enter" || e.key === " ") {
-        toggle();
-        e.preventDefault();
-        return;
-      }
-      if (e.key === "ArrowDown" && !open) {
-        setOpen(true);
-        e.preventDefault();
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        const idx = options.findIndex((o) => o.value === value);
-        const next = options
-          .slice(idx < 0 ? 0 : idx + 1)
-          .find((o) => !o.disabled);
-        if (next) onChange?.(next.value);
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        const idx = options.findIndex((o) => o.value === value);
-        if (idx < 0) return;
-        const prev = [...options]
-          .slice(0, idx)
-          .reverse()
-          .find((o) => !o.disabled);
-        if (prev) onChange?.(prev.value);
-      }
-    },
-    [open, options, value, onChange, toggle],
-  );
-
-  const triggerClass = [
-    "flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm",
-    "transition-colors bg-white dark:bg-slate-800/60",
-    "focus:outline-none focus:ring-2 focus:ring-offset-0",
-    error
-      ? "border-red-400 dark:border-red-500 focus:ring-red-500/20"
-      : "border-zinc-200 dark:border-slate-700 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 focus:border-primary-500 dark:focus:border-secondary-400",
-    disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-    className,
-  ].join(" ");
-
-  return (
-    <div ref={ref} className="relative w-full">
-      {label && (
-        <Label
-          htmlFor={id}
-          className="!text-zinc-700 dark:!text-zinc-300"
-          required={required}
-        >
-          {label}
-        </Label>
-      )}
-
-      <Button
-        id={id}
-        type="button"
-        role="combobox"
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        aria-disabled={disabled}
-        disabled={disabled}
-        variant="ghost"
-        className={triggerClass}
-        onClick={toggle}
-        onKeyDown={handleKeyDown}
-      >
-        <Span
-          className={
-            selected
-              ? "text-zinc-900 dark:text-zinc-50"
-              : "text-zinc-400 dark:text-zinc-500"
-          }
-        >
-          {selected?.label ?? placeholder}
-        </Span>
-        <ChevronDown
-          className={`h-4 w-4 flex-shrink-0 text-zinc-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
-          aria-hidden="true"
-        />
-      </Button>
-
-      {open && (
-        <Ul
-          role="listbox"
-          className={[
-            "absolute z-50 w-full overflow-auto rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-lg max-h-60 py-1",
-            openUp ? "bottom-full mb-1" : "top-full mt-1",
-          ].join(" ")}
-        >
-          {options.map((option) => {
-            const isSelected = option.value === value;
-            return (
-              <Li
-                key={option.value}
-                role="option"
-                aria-selected={isSelected}
-                aria-disabled={option.disabled}
-                className={[
-                  "relative flex cursor-pointer items-center px-3 py-2 text-sm select-none",
-                  option.disabled
-                    ? "opacity-40 cursor-not-allowed"
-                    : isSelected
-                      ? "bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300"
-                      : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-700",
-                ].join(" ")}
-                onClick={() => !option.disabled && handleSelect(option.value)}
-              >
-                <Span className="flex-1">{option.label}</Span>
-                {isSelected && (
-                  <Check
-                    className="h-4 w-4 ml-2 flex-shrink-0"
-                    aria-hidden="true"
-                  />
-                )}
-              </Li>
-            );
-          })}
-        </Ul>
-      )}
-
-      {error && (
-        <Text size="xs" variant="error" className="mt-1.5" role="alert">
-          {error}
-        </Text>
-      )}
-    </div>
-  );
-}