@mohasinac/appkit 2.1.3 → 2.3.0

package/src/ui/color.helper.ts

@@ -1,37 +0,0 @@
-/**
- * Color Helpers
- *
- * UI helpers for color manipulation and utilities.
- */
-
-export function hexToRgb(
-  hex: string,
-): { r: number; g: number; b: number } | null {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
-}
-
-export function rgbToHex(r: number, g: number, b: number): string {
-  return (
-    "#" +
-    [r, g, b]
-      .map((x) => {
-        const hex = x.toString(16);
-        return hex.length === 1 ? "0" + hex : hex;
-      })
-      .join("")
-  );
-}
-
-export function getContrastColor(hex: string): "#000000" | "#ffffff" {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return "#000000";
-  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-  return luminance > 0.5 ? "#000000" : "#ffffff";
-}

package/src/ui/components/Accordion.tsx

@@ -1,189 +0,0 @@
-"use client";
-
-import React, { createContext, useContext, useMemo, useState } from "react";
-import { Button } from "./Button";
-import { Div } from "./Div";
-import { Span } from "./Typography";
-
-interface AccordionContextValue {
-  type: "single" | "multiple";
-  openValues: string[];
-  toggle: (value: string) => void;
-}
-
-const AccordionContext = createContext<AccordionContextValue | null>(null);
-
-export interface AccordionProps {
-  /** Legacy simple mode: renders a native details/summary accordion */
-  title?: React.ReactNode;
-  /** Legacy simple mode open state */
-  open?: boolean;
-  /** Legacy simple mode title styling */
-  titleClassName?: string;
-  /** Legacy simple mode content styling */
-  contentClassName?: string;
-
-  /** Controlled/list mode: single or multiple expanded items */
-  type?: "single" | "multiple";
-  defaultValue?: string | string[];
-  value?: string | string[];
-  onChange?: (value: string | string[]) => void;
-
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export interface AccordionItemProps {
-  value: string;
-  title: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-function toArray(value?: string | string[]): string[] {
-  if (!value) return [];
-  return Array.isArray(value) ? value : [value];
-}
-
-function renderLegacyAccordion({
-  title,
-  children,
-  open,
-  className = "",
-  titleClassName = "",
-  contentClassName = "",
-}: {
-  title: React.ReactNode;
-  children?: React.ReactNode;
-  open: boolean;
-  className?: string;
-  titleClassName?: string;
-  contentClassName?: string;
-}) {
-  return (
-    <details
-      open={open}
-      className={`group border-b border-zinc-200 dark:border-zinc-700 ${className}`}
-    >
-      <summary
-        className={`flex cursor-pointer select-none list-none items-center justify-between py-3 text-sm font-medium text-zinc-900 dark:text-zinc-100 ${titleClassName}`}
-      >
-        {title}
-        <span
-          className="ml-2 flex-shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-180"
-          aria-hidden="true"
-        >
-          ▾
-        </span>
-      </summary>
-      <div
-        className={`pb-4 text-sm text-zinc-600 dark:text-zinc-400 ${contentClassName}`}
-      >
-        {children}
-      </div>
-    </details>
-  );
-}
-
-export function Accordion({
-  title,
-  children,
-  open = false,
-  className = "",
-  titleClassName = "",
-  contentClassName = "",
-  type = "single",
-  defaultValue,
-  value,
-  onChange,
-}: AccordionProps) {
-  // Backward-compatible simple details mode.
-  if (title !== undefined) {
-    return renderLegacyAccordion({
-      title,
-      children,
-      open,
-      className,
-      titleClassName,
-      contentClassName,
-    });
-  }
-
-  const initialOpen = useMemo(() => {
-    if (value !== undefined) return toArray(value);
-    return toArray(defaultValue);
-  }, [defaultValue, value]);
-
-  const [internalOpenValues, setInternalOpenValues] =
-    useState<string[]>(initialOpen);
-
-  const activeOpenValues =
-    value !== undefined ? toArray(value) : internalOpenValues;
-
-  const toggle = (itemValue: string) => {
-    const nextOpenValues =
-      type === "single"
-        ? activeOpenValues.includes(itemValue)
-          ? []
-          : [itemValue]
-        : activeOpenValues.includes(itemValue)
-          ? activeOpenValues.filter((v) => v !== itemValue)
-          : [...activeOpenValues, itemValue];
-
-    if (value === undefined) {
-      setInternalOpenValues(nextOpenValues);
-    }
-
-    onChange?.(type === "single" ? (nextOpenValues[0] ?? "") : nextOpenValues);
-  };
-
-  return (
-    <AccordionContext.Provider
-      value={{ type, openValues: activeOpenValues, toggle }}
-    >
-      <Div className={className}>{children}</Div>
-    </AccordionContext.Provider>
-  );
-}
-
-export function AccordionItem({
-  value,
-  title,
-  disabled = false,
-  className = "",
-  children,
-}: AccordionItemProps) {
-  const ctx = useContext(AccordionContext);
-  if (!ctx) {
-    throw new Error("AccordionItem must be used within Accordion.");
-  }
-
-  const isOpen = ctx.openValues.includes(value);
-
-  return (
-    <Div
-      className={`border-b border-gray-200 dark:border-gray-700 ${className}`}
-    >
-      <Button
-        type="button"
-        disabled={disabled}
-        aria-expanded={isOpen}
-        onClick={() => ctx.toggle(value)}
-        className="w-full flex items-center justify-between py-3 px-1 text-left text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        <Span>{title}</Span>
-        <Span
-          className={`transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
-        >
-          ▾
-        </Span>
-      </Button>
-      {isOpen && (
-        <Div className="pb-3 px-1 text-sm text-gray-600 dark:text-gray-400">
-          {children}
-        </Div>
-      )}
-    </Div>
-  );
-}

package/src/ui/components/ActiveFilterChips.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import React from "react";
-import { Row } from "./Layout";
-import { Span } from "./Typography";
-
-export interface ActiveFilter {
-  key: string;
-  label: string;
-  value: string;
-}
-
-export interface ActiveFilterChipsProps {
-  filters: ActiveFilter[];
-  onRemove: (key: string) => void;
-  onClearAll: () => void;
-  className?: string;
-  clearAllLabel?: string;
-}
-
-export function ActiveFilterChips({
-  filters,
-  onRemove,
-  onClearAll,
-  className = "",
-  clearAllLabel = "Clear all",
-}: ActiveFilterChipsProps) {
-  if (filters.length === 0) return null;
-
-  return (
-    <Row
-      wrap
-      gap="sm"
-      className={className}
-      role="list"
-      aria-label="Active filters"
-    >
-      {filters.map((filter) => (
-        <span
-          key={filter.key}
-          role="listitem"
-          className="inline-flex items-center gap-1 text-xs font-medium rounded-lg border border-zinc-200 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800 text-zinc-800 dark:text-zinc-200 py-1 pl-2 pr-1"
-        >
-          <Span className="text-zinc-500 dark:text-zinc-400 mr-0.5">
-            {filter.label}:
-          </Span>
-          {filter.value}
-          <button
-            type="button"
-            onClick={() => onRemove(filter.key)}
-            aria-label={`Remove ${filter.label}: ${filter.value} filter`}
-            className="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors"
-          >
-            <svg
-              className="w-2.5 h-2.5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={3}
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </span>
-      ))}
-
-      <button
-        type="button"
-        onClick={onClearAll}
-        className="text-xs font-medium text-primary hover:underline p-2"
-      >
-        {clearAllLabel}
-      </button>
-    </Row>
-  );
-}

package/src/ui/components/Alert.tsx

@@ -1,167 +0,0 @@
-import React from "react";
-import { Heading } from "./Typography";
-import { Button } from "./Button";
-
-/**
- * Alert — flexible alert/notification with variant icons and optional dismiss.
- *
- * Extracted from src/components/feedback/Alert.tsx for @mohasinac/ui.
- * Theme values inlined from THEME_CONSTANTS.colors.alert and THEME_CONSTANTS.colors.button.
- */
-
-// Inlined from THEME_CONSTANTS.colors.alert
-const ALERT_STYLES = {
-  info: {
-    container:
-      "bg-sky-50 border-sky-200/80 dark:bg-sky-950/30 dark:border-sky-800/50",
-    icon: "text-sky-600 dark:text-sky-400",
-    title: "text-sky-900 dark:text-sky-200",
-    text: "text-sky-800 dark:text-sky-300",
-  },
-  success: {
-    container:
-      "bg-emerald-50 border-emerald-200/80 dark:bg-emerald-950/30 dark:border-emerald-800/50",
-    icon: "text-emerald-600 dark:text-emerald-400",
-    title: "text-emerald-900 dark:text-emerald-200",
-    text: "text-emerald-800 dark:text-emerald-300",
-  },
-  warning: {
-    container:
-      "bg-amber-50 border-amber-200/80 dark:bg-amber-950/30 dark:border-amber-800/50",
-    icon: "text-amber-600 dark:text-amber-400",
-    title: "text-amber-900 dark:text-amber-200",
-    text: "text-amber-800 dark:text-amber-300",
-  },
-  error: {
-    container:
-      "bg-red-50 border-red-200/80 dark:bg-red-950/30 dark:border-red-800/50",
-    icon: "text-red-600 dark:text-red-400",
-    title: "text-red-900 dark:text-red-200",
-    text: "text-red-800 dark:text-red-300",
-  },
-} as const;
-
-const ALERT_CLOSE_HOVER = "hover:bg-black/5 dark:hover:bg-white/5";
-
-const ICONS = {
-  info: (
-    <svg
-      className="w-5 h-5"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-        clipRule="evenodd"
-      />
-    </svg>
-  ),
-  success: (
-    <svg
-      className="w-5 h-5"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-        clipRule="evenodd"
-      />
-    </svg>
-  ),
-  warning: (
-    <svg
-      className="w-5 h-5"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-        clipRule="evenodd"
-      />
-    </svg>
-  ),
-  error: (
-    <svg
-      className="w-5 h-5"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-        clipRule="evenodd"
-      />
-    </svg>
-  ),
-} as const;
-
-export interface AlertProps {
-  children: React.ReactNode;
-  variant?: keyof typeof ALERT_STYLES;
-  title?: string;
-  onClose?: () => void;
-  className?: string;
-}
-
-export function Alert({
-  children,
-  variant = "info",
-  title,
-  onClose,
-  className = "",
-}: AlertProps) {
-  const styles = ALERT_STYLES[variant];
-
-  return (
-    <div
-      className={`relative p-4 rounded-xl border ${styles.container} ${className}`}
-      role="alert"
-    >
-      <div className="flex gap-3">
-        <div className={`flex-shrink-0 ${styles.icon}`}>{ICONS[variant]}</div>
-
-        <div className="flex-1 min-w-0">
-          {title && (
-            <Heading
-              level={3}
-              className={`text-sm font-semibold mb-1 ${styles.title}`}
-            >
-              {title}
-            </Heading>
-          )}
-          <div className={`text-sm ${styles.text}`}>{children}</div>
-        </div>
-
-        {onClose && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onClose}
-            className={`flex-shrink-0 ml-3 rounded-lg p-1.5 min-h-0 ${styles.icon} ${ALERT_CLOSE_HOVER}`}
-            aria-label="Close"
-          >
-            <svg
-              className="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              aria-hidden="true"
-            >
-              <path
-                fillRule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/ui/components/Badge.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-import { Span } from "./Typography";
-
-/**
- * Badge — compact label with ring border variants for status, roles, and categories.
- *
- * Extracted from src/components/ui/Badge.tsx for @mohasinac/ui.
- * Theme values inlined from THEME_CONSTANTS.badge and THEME_CONSTANTS.colors.badge.
- */
-
-// Inlined from THEME_CONSTANTS.badge — full ring-border variants
-const BADGE_CLASSES = {
-  // Status badges
-  active:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
-  inactive:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-600 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-400 dark:ring-zinc-400/20",
-  pending:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20",
-  approved:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
-  rejected:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20",
-  // Semantic badges
-  success:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
-  warning:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20",
-  danger:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20",
-  info: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20",
-  // Role badges
-  admin:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-purple-50 text-purple-700 ring-1 ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-300 dark:ring-purple-400/20",
-  moderator:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20",
-  seller:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-teal-50 text-teal-700 ring-1 ring-teal-600/20 dark:bg-teal-900/30 dark:text-teal-300 dark:ring-teal-400/20",
-  user: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-700 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-300 dark:ring-zinc-400/20",
-  // Legacy / generic variants
-  default:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-700 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-300 dark:ring-zinc-400/20",
-  primary:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300",
-  secondary:
-    "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300",
-} as const;
-
-export type BadgeVariant = keyof typeof BADGE_CLASSES;
-
-export interface BadgeProps {
-  children: React.ReactNode;
-  variant?: BadgeVariant;
-  className?: string;
-}
-
-export function Badge({
-  children,
-  variant = "default",
-  className = "",
-}: BadgeProps) {
-  return (
-    <Span className={`${BADGE_CLASSES[variant]} ${className}`}>{children}</Span>
-  );
-}

package/src/ui/components/Breadcrumb.tsx

@@ -1,61 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { Nav, Ol, Li } from "./Semantic";
-import { Span } from "./Typography";
-
-/**
- * Breadcrumb — accessible navigation trail with ChevronRight separators.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Last item is displayed with `font-medium` (non-link, current page).
- */
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-
-export interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-  className?: string;
-}
-
-export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
-  return (
-    <Nav aria-label="Breadcrumb" className={className}>
-      <Ol className="flex items-center gap-1 flex-wrap text-sm text-zinc-500 dark:text-zinc-400">
-        {items.map((item, i) => {
-          const isLast = i === items.length - 1;
-          return (
-            <Li key={i} className="flex items-center gap-1">
-              {i > 0 && (
-                <ChevronRight
-                  className="w-3.5 h-3.5 flex-shrink-0 text-zinc-400 dark:text-zinc-600"
-                  aria-hidden="true"
-                />
-              )}
-              {isLast || !item.href ? (
-                <Span
-                  className={
-                    isLast
-                      ? "font-medium text-zinc-900 dark:text-zinc-50"
-                      : "text-zinc-500 dark:text-zinc-400"
-                  }
-                  aria-current={isLast ? "page" : undefined}
-                >
-                  {item.label}
-                </Span>
-              ) : (
-                <a
-                  href={item.href}
-                  className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
-                >
-                  {item.label}
-                </a>
-              )}
-            </Li>
-          );
-        })}
-      </Ol>
-    </Nav>
-  );
-}