@mohasinac/appkit 2.1.3 → 2.3.0

package/src/ui/components/BulkActionBar.tsx

@@ -1,246 +0,0 @@
-"use client";
-
-/**
- * BulkActionBar
- *
- * Appears at the top of the content area whenever one or more list items are
- * selected. Shows a selection-count pill (tap ✕ to clear), a type-picker
- * dropdown, and an Apply button.
- *
- * Rendered by ListingLayout automatically when selectedCount > 0.
- */
-
-import React, { useState, useRef, useEffect } from "react";
-import { ChevronUp, ChevronDown, X } from "lucide-react";
-import { Button } from "./Button";
-import { Span } from "./Typography";
-
-export interface BulkActionItem {
-  id: string;
-  label: string;
-  variant?:
-    | "primary"
-    | "secondary"
-    | "outline"
-    | "danger"
-    | "ghost"
-    | "warning";
-  icon?: React.ReactNode;
-  onClick: () => void;
-  disabled?: boolean;
-  loading?: boolean;
-}
-
-export interface BulkActionBarLabels {
-  /** e.g. "${count} selected" — receives count as format arg */
-  selected?: string;
-  apply?: string;
-  clearSelection?: string;
-  bulkActions?: string;
-}
-
-export interface BulkActionBarProps {
-  selectedCount: number;
-  onClearSelection?: () => void;
-  actions?: BulkActionItem[];
-  labels?: BulkActionBarLabels;
-}
-
-const DEFAULT_LABELS: Required<BulkActionBarLabels> = {
-  selected: "selected",
-  apply: "Apply",
-  clearSelection: "Clear selection",
-  bulkActions: "Bulk actions",
-};
-
-export function BulkActionBar({
-  selectedCount,
-  onClearSelection,
-  actions = [],
-  labels,
-}: BulkActionBarProps) {
-  const l = { ...DEFAULT_LABELS, ...labels };
-
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [selectedActionId, setSelectedActionId] = useState<string | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Inline click-outside handler
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (!containerRef.current?.contains(e.target as Node)) {
-        setPickerOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, []);
-
-  // Keep selectedActionId in sync with available actions
-  useEffect(() => {
-    setSelectedActionId((prev) => {
-      const ids = actions.map((a) => a.id);
-      if (prev && ids.includes(prev)) return prev;
-      return ids[0] ?? null;
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [actions.map((a) => a.id).join(",")]);
-
-  if (selectedCount === 0) return null;
-
-  const selectedAction = actions.find((a) => a.id === selectedActionId);
-
-  const handleApply = () => {
-    if (!selectedActionId) return;
-    selectedAction?.onClick();
-    setPickerOpen(false);
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      className="relative rounded-lg overflow-hidden border border-primary/20 dark:border-primary/30 animate-in fade-in slide-in-from-top-1 duration-150"
-      role="region"
-      aria-live="polite"
-      aria-label={l.bulkActions}
-    >
-      {/* Accent stripe */}
-      <div className="h-[3px] w-full bg-gradient-to-r from-primary-600 via-primary-400 to-primary-600 dark:from-secondary-600 dark:via-secondary-400 dark:to-secondary-600" />
-
-      {/* Main row */}
-      <div className="flex items-center gap-2 px-3 py-2">
-        {/* Selection count pill */}
-        <Button
-          type="button"
-          variant="ghost"
-          onClick={onClearSelection}
-          className="inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0"
-          aria-label={l.clearSelection}
-        >
-          <X className="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true" />
-          <Span className="text-xs font-semibold tabular-nums whitespace-nowrap leading-none">
-            {selectedCount} {l.selected}
-          </Span>
-        </Button>
-
-        {/* Picker trigger */}
-        {actions.length > 0 && (
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={() => setPickerOpen((o) => !o)}
-            aria-haspopup="listbox"
-            aria-expanded={pickerOpen}
-            className={[
-              "flex-1 min-w-0 h-10 flex items-center gap-2 px-3 rounded-lg border text-sm font-medium transition-colors",
-              "bg-zinc-50 hover:bg-zinc-100 active:bg-zinc-200 dark:bg-slate-800/60 dark:hover:bg-slate-700/60",
-              "border-zinc-200 dark:border-slate-700",
-              selectedAction?.variant === "danger"
-                ? "text-red-600 dark:text-red-400"
-                : "text-zinc-800 dark:text-zinc-100",
-            ]
-              .filter(Boolean)
-              .join(" ")}
-          >
-            {selectedAction?.icon && (
-              <Span
-                className="flex-shrink-0 w-4 h-4 flex items-center justify-center"
-                aria-hidden="true"
-              >
-                {selectedAction.icon}
-              </Span>
-            )}
-            <Span className="flex-1 truncate text-left leading-none">
-              {selectedAction?.label ?? l.bulkActions}
-            </Span>
-            {pickerOpen ? (
-              <ChevronUp
-                className="w-4 h-4 flex-shrink-0 text-zinc-400"
-                aria-hidden="true"
-              />
-            ) : (
-              <ChevronDown
-                className="w-4 h-4 flex-shrink-0 text-zinc-400"
-                aria-hidden="true"
-              />
-            )}
-          </Button>
-        )}
-
-        {/* Apply button */}
-        {actions.length > 0 && (
-          <Button
-            type="button"
-            variant={selectedAction?.variant ?? "primary"}
-            size="sm"
-            isLoading={selectedAction?.loading}
-            disabled={
-              !selectedActionId ||
-              selectedAction?.disabled ||
-              selectedAction?.loading
-            }
-            onClick={handleApply}
-            className="h-10 flex-shrink-0"
-          >
-            <Span className="leading-none">{l.apply}</Span>
-          </Button>
-        )}
-      </div>
-
-      {/* Picker dropdown */}
-      {actions.length > 0 && (
-        <div
-          role="listbox"
-          aria-label={l.bulkActions}
-          className={[
-            "overflow-hidden border-t border-zinc-200/80 dark:border-slate-700/80",
-            "transition-[max-height,opacity] duration-200 ease-out",
-            pickerOpen
-              ? "max-h-64 opacity-100"
-              : "max-h-0 opacity-0 pointer-events-none",
-          ]
-            .filter(Boolean)
-            .join(" ")}
-        >
-          {actions.map((action) => (
-            <button
-              key={action.id}
-              role="option"
-              aria-selected={selectedActionId === action.id}
-              disabled={action.disabled}
-              onClick={() => {
-                setSelectedActionId(action.id);
-                setPickerOpen(false);
-              }}
-              className={[
-                "w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-left transition-colors",
-                "hover:bg-zinc-50 dark:hover:bg-slate-800/60",
-                action.variant === "danger"
-                  ? "text-red-600 dark:text-red-400"
-                  : "text-zinc-700 dark:text-zinc-200",
-                selectedActionId === action.id
-                  ? "bg-zinc-50 dark:bg-slate-800/60 font-medium"
-                  : "",
-                action.disabled
-                  ? "opacity-40 cursor-not-allowed"
-                  : "cursor-pointer",
-              ]
-                .filter(Boolean)
-                .join(" ")}
-            >
-              {action.icon && (
-                <Span
-                  className="flex-shrink-0 w-4 h-4 flex items-center justify-center"
-                  aria-hidden="true"
-                >
-                  {action.icon}
-                </Span>
-              )}
-              <Span className="flex-1">{action.label}</Span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/ui/components/Button.tsx

@@ -1,75 +0,0 @@
-import React from "react";
-import { twMerge } from "tailwind-merge";
-import { Loader2 } from "lucide-react";
-
-/**
- * Button — versatile button with multiple variants, sizes, and loading state.
- *
- * Extracted from src/components/ui/Button.tsx for @mohasinac/ui.
- * Theme values inlined from THEME_CONSTANTS.button and THEME_CONSTANTS.colors.button.
- */
-
-// Inlined from THEME_CONSTANTS
-const UI_BUTTON = {
-  base: "inline-flex items-center justify-center font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
-  active: "active:scale-95",
-  variants: {
-    primary:
-      "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm focus:ring-primary-500/30 dark:bg-secondary-500 dark:text-white dark:hover:bg-secondary-400 dark:active:bg-secondary-600 dark:focus:ring-secondary-400/30",
-    secondary:
-      "bg-primary-700 text-white hover:bg-primary-600 active:bg-primary-800 shadow-md focus:ring-primary-500 dark:bg-secondary-700 dark:text-white dark:hover:bg-secondary-600 dark:active:bg-secondary-800 dark:focus:ring-secondary-500",
-    outline:
-      "border border-zinc-200 dark:border-slate-700 bg-white dark:bg-transparent text-zinc-900 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-slate-800 focus:ring-zinc-400",
-    ghost:
-      "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 focus:ring-zinc-400",
-    danger:
-      "bg-red-600 text-white hover:bg-red-500 active:bg-red-700 shadow-sm shadow-red-600/10 focus:ring-red-500",
-    warning:
-      "bg-amber-500 text-white hover:bg-amber-400 active:bg-amber-600 shadow-sm shadow-amber-500/10 focus:ring-amber-500",
-  },
-  sizes: {
-    sm: "px-2.5 py-1.5 text-xs sm:px-3 sm:text-sm gap-1.5 min-h-[36px]",
-    md: "px-3 py-2 text-sm sm:px-4 sm:py-2.5 sm:text-base gap-2 min-h-[44px]",
-    lg: "px-4 py-2.5 text-base sm:px-6 sm:py-3 sm:text-lg gap-2.5 min-h-[44px]",
-  },
-} as const;
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: keyof typeof UI_BUTTON.variants;
-  size?: keyof typeof UI_BUTTON.sizes;
-  isLoading?: boolean;
-  children?: React.ReactNode;
-}
-
-export function Button({
-  variant = "primary",
-  size = "md",
-  className = "",
-  isLoading = false,
-  disabled,
-  children,
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      className={twMerge(
-        UI_BUTTON.base,
-        UI_BUTTON.active,
-        UI_BUTTON.variants[variant],
-        UI_BUTTON.sizes[size],
-        className,
-      )}
-      disabled={disabled || isLoading}
-      aria-busy={isLoading || undefined}
-      {...props}
-    >
-      {isLoading && (
-        <Loader2
-          className="w-4 h-4 animate-spin flex-shrink-0"
-          aria-hidden="true"
-        />
-      )}
-      {isLoading ? <span className="opacity-70">{children}</span> : children}
-    </button>
-  );
-}

package/src/ui/components/CountdownDisplay.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { Span } from "./Typography";
-import { classNames } from "../style.helper";
-
-export interface CountdownRemaining {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-}
-
-export interface CountdownDisplayProps {
-  targetDate: Date;
-  format?: "dhms" | "hms" | "auto";
-  expiredLabel?: string;
-  className?: string;
-}
-
-function getRemaining(targetDate: Date): CountdownRemaining | null {
-  const now = Date.now();
-  const distance = targetDate.getTime() - now;
-  if (distance <= 0) {
-    return null;
-  }
-
-  const totalSeconds = Math.floor(distance / 1000);
-  const days = Math.floor(totalSeconds / 86400);
-  const hours = Math.floor((totalSeconds % 86400) / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-
-  return { days, hours, minutes, seconds };
-}
-
-function formatLabel(
-  remaining: CountdownRemaining,
-  format: "dhms" | "hms" | "auto",
-): string {
-  const { days, hours, minutes, seconds } = remaining;
-
-  if (format === "hms") {
-    const totalHours = days * 24 + hours;
-    return `${totalHours}h ${minutes}m ${seconds}s`;
-  }
-
-  if (format === "dhms") {
-    return `${days}d ${hours}h ${minutes}m ${seconds}s`;
-  }
-
-  if (days > 0) {
-    return `${days}d ${hours}h ${minutes}m`;
-  }
-  if (hours > 0) {
-    return `${hours}h ${minutes}m ${seconds}s`;
-  }
-  return `${minutes}m ${seconds}s`;
-}
-
-export function CountdownDisplay({
-  targetDate,
-  format = "auto",
-  expiredLabel = "Ended",
-  className,
-}: CountdownDisplayProps) {
-  const [tick, setTick] = useState(0);
-
-  useEffect(() => {
-    const id = window.setInterval(() => {
-      setTick((value) => value + 1);
-    }, 1000);
-
-    return () => {
-      window.clearInterval(id);
-    };
-  }, []);
-
-  const remaining = useMemo(() => getRemaining(targetDate), [targetDate, tick]);
-  const label = remaining ? formatLabel(remaining, format) : expiredLabel;
-
-  return (
-    <Span variant="inherit" className={classNames("tabular-nums", className)}>
-      {label}
-    </Span>
-  );
-}

package/src/ui/components/DescriptionField.tsx

@@ -1,55 +0,0 @@
-// appkit/src/ui/components/DescriptionField.tsx
-import { THEME_CONSTANTS } from "../../tokens";
-
-export interface DescriptionFieldProps {
-  label: string;
-  value: string;
-  /** Force full-width regardless of value length (default: auto-detect by length) */
-  fullWidth?: boolean;
-  className?: string;
-}
-
-/**
- * `DescriptionField` — renders a label + value pair using the appropriate
- * text style. Short values render inline-ish (`flex-1 min-w-[280px]`);
- * long values (> 80 chars) take full width with `prose` wrapping.
- *
- * Designed for use inside `FormGrid` or `<Row as="dl">` definition lists.
- *
- * @example
- * ```tsx
- * <Row as="dl" wrap gap="md">
- *   <DescriptionField label="Store name" value="My Amazing Store" />
- *   <DescriptionField label="Description" value={longDescription} />
- * </Row>
- * ```
- */
-export function DescriptionField({
-  label,
-  value,
-  fullWidth,
-  className,
-}: DescriptionFieldProps) {
-  const isLong = fullWidth ?? value.length > 80;
-
-  return (
-    <div
-      className={[
-        "flex flex-col gap-1",
-        isLong ? "w-full" : "flex-1 min-w-[280px]",
-        className ?? "",
-      ]
-        .join(" ")
-        .trim()}
-    >
-      <dt className={THEME_CONSTANTS.text.label}>{label}</dt>
-      <dd
-        className={
-          isLong ? THEME_CONSTANTS.text.body : THEME_CONSTANTS.text.body
-        }
-      >
-        {value}
-      </dd>
-    </div>
-  );
-}

package/src/ui/components/Div.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-
-export interface DivProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-}
-
-/**
- * Semantic `<div>` wrapper for general-purpose layout containers.
- *
- * Use when no more specific semantic element applies
- * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables
- * future one-place theming and consistent import from `@mohasinac/appkit/ui`.
- *
- * @example
- * ```tsx
- * <Div className="flex items-center gap-4">
- *   <Badge>New</Badge>
- *   <Text>Product title</Text>
- * </Div>
- * ```
- */
-export const Div = React.forwardRef<HTMLDivElement, DivProps>(
-  ({ className = "", children, ...props }, ref) => (
-    <div ref={ref} className={className} {...props}>
-      {children}
-    </div>
-  ),
-);
-Div.displayName = "Div";

package/src/ui/components/Divider.tsx

@@ -1,52 +0,0 @@
-import { Span } from "./Typography";
-
-/**
- * Divider — horizontal or vertical visual separator with optional label.
- *
- * Extracted from src/components/ui/Divider.tsx for @mohasinac/ui.
- * Theme values inlined from THEME_CONSTANTS.themed.
- */
-
-// Inlined from THEME_CONSTANTS.themed
-const BORDER_LIGHT = "border-zinc-100 dark:border-slate-700/60";
-const TEXT_MUTED = "text-zinc-400 dark:text-zinc-500";
-
-export interface DividerProps {
-  label?: string;
-  orientation?: "horizontal" | "vertical";
-  className?: string;
-}
-
-export function Divider({
-  label,
-  orientation = "horizontal",
-  className = "",
-}: DividerProps) {
-  if (orientation === "vertical") {
-    return (
-      <div
-        className={`w-px h-full border-l ${BORDER_LIGHT} ${className}`}
-        role="separator"
-        aria-orientation="vertical"
-      />
-    );
-  }
-
-  if (label) {
-    return (
-      <div className={`flex items-center gap-4 ${className}`} role="separator">
-        <div className={`flex-1 h-px border-t ${BORDER_LIGHT}`} />
-        <Span className={`text-sm font-medium ${TEXT_MUTED}`}>{label}</Span>
-        <div className={`flex-1 h-px border-t ${BORDER_LIGHT}`} />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`w-full h-px border-t ${BORDER_LIGHT} ${className}`}
-      role="separator"
-      aria-orientation="horizontal"
-    />
-  );
-}