@mohasinac/appkit 2.1.3 → 2.3.0

package/src/ui/components/TagInput.tsx

@@ -1,133 +0,0 @@
-"use client";
-
-import React, { useRef, useState } from "react";
-import { Label, Span } from "./Typography";
-
-export interface TagInputProps {
-  value: string[];
-  onChange: (tags: string[]) => void;
-  disabled?: boolean;
-  label?: string;
-  placeholder?: string;
-  className?: string;
-  helperText?: string;
-}
-
-export function TagInput({
-  value,
-  onChange,
-  disabled = false,
-  label,
-  placeholder = "Add a tag...",
-  className = "",
-  helperText = "Press Enter or comma to add a tag",
-}: TagInputProps) {
-  const [draft, setDraft] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const addTag = (raw: string) => {
-    const tag = raw.trim().replace(/,+$/, "").trim();
-    if (!tag || value.includes(tag)) {
-      setDraft("");
-      return;
-    }
-    onChange([...value, tag]);
-    setDraft("");
-  };
-
-  const removeTag = (tag: string) => {
-    onChange(value.filter((t) => t !== tag));
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" || e.key === ",") {
-      e.preventDefault();
-      addTag(draft);
-      return;
-    }
-
-    if (e.key === "Backspace" && draft === "" && value.length > 0) {
-      onChange(value.slice(0, -1));
-    }
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value;
-    if (inputValue.includes(",")) {
-      const parts = inputValue.split(",");
-      const last = parts.pop() ?? "";
-      parts.forEach((part) => addTag(part));
-      setDraft(last);
-      return;
-    }
-
-    setDraft(inputValue);
-  };
-
-  const handleBlur = () => {
-    if (draft.trim()) {
-      addTag(draft);
-    }
-  };
-
-  return (
-    <div className={className}>
-      {label && <Label className="mb-1.5 block text-sm font-medium">{label}</Label>}
-
-      <div
-        onClick={() => !disabled && inputRef.current?.focus()}
-        className={[
-          "flex min-h-[42px] w-full cursor-text flex-wrap items-center gap-1.5 rounded-lg border px-3 py-2",
-          "border-zinc-300 bg-white dark:border-slate-700 dark:bg-slate-900",
-          disabled
-            ? "cursor-not-allowed opacity-50"
-            : "transition-colors focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30",
-        ].join(" ")}
-      >
-        {value.map((tag) => (
-          <span
-            key={tag}
-            className="inline-flex items-center gap-1 rounded-full bg-primary-500/10 px-2 py-0.5 text-xs font-medium text-primary-700 dark:text-primary-300"
-          >
-            <Span size="xs">{tag}</Span>
-            {!disabled && (
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  removeTag(tag);
-                }}
-                className="ml-0.5 text-primary-700/70 hover:text-primary-700 dark:text-primary-300/70 dark:hover:text-primary-300"
-                aria-label={`Remove tag ${tag}`}
-              >
-                x
-              </button>
-            )}
-          </span>
-        ))}
-
-        <input
-          ref={inputRef}
-          value={draft}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onBlur={handleBlur}
-          disabled={disabled}
-          placeholder={value.length === 0 ? placeholder : ""}
-          className={[
-            "min-w-[100px] flex-1 bg-transparent text-sm outline-none",
-            "text-zinc-900 placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500",
-            disabled ? "cursor-not-allowed" : "",
-          ].join(" ")}
-          aria-label={label ?? "Tag input"}
-        />
-      </div>
-
-      {helperText && (
-        <Span size="xs" className="mt-1 text-zinc-500 dark:text-zinc-400">
-          {helperText}
-        </Span>
-      )}
-    </div>
-  );
-}

package/src/ui/components/TextLink.tsx

@@ -1,68 +0,0 @@
-"use client";
-
-import React from "react";
-import Link from "next/link";
-import { twMerge } from "tailwind-merge";
-
-const VARIANTS = {
-  default:
-    "text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 transition-colors",
-  muted:
-    "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors",
-  underline:
-    "text-primary-600 dark:text-primary-400 underline hover:no-underline transition-all",
-  none: "",
-} as const;
-
-export interface TextLinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href: string;
-  children: React.ReactNode;
-  variant?: keyof typeof VARIANTS;
-  /**
-   * Set to true to render a plain `<a>` targeting "_blank" with rel="noopener noreferrer".
-   * Defaults to false — renders a Next.js `<Link>` for SPA navigation.
-   */
-  external?: boolean;
-}
-
-/**
- * Styled anchor wrapper. Uses `next/link` for internal navigation and
- * a plain `<a>` for external links.
- *
- * @example
- * ```tsx
- * <TextLink href="/products">View all products</TextLink>
- * <TextLink href="https://example.com" external>External site</TextLink>
- * ```
- */
-export function TextLink({
-  href,
-  children,
-  variant = "default",
-  external = false,
-  className = "",
-  ...props
-}: TextLinkProps) {
-  const cls = twMerge(VARIANTS[variant], className);
-
-  if (external) {
-    return (
-      <a
-        href={href}
-        className={cls}
-        target="_blank"
-        rel="noopener noreferrer"
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  }
-
-  return (
-    <Link href={href} className={cls} {...(props as Record<string, unknown>)}>
-      {children}
-    </Link>
-  );
-}

package/src/ui/components/Textarea.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-export function Textarea({ className = "", ...props }: TextareaProps) {
-  return (
-    <textarea
-      className={[
-        "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...props}
-    />
-  );
-}

package/src/ui/components/Tooltip.tsx

@@ -1,190 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useRef, useCallback } from "react";
-
-const TOOLTIP_CONTENT =
-  "absolute z-50 whitespace-nowrap px-2 py-1 text-xs font-medium rounded bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 shadow-sm pointer-events-none";
-
-const POSITION: Record<string, string> = {
-  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-  left: "right-full top-1/2 -translate-y-1/2 mr-2",
-  right: "left-full top-1/2 -translate-y-1/2 ml-2",
-};
-
-export interface TooltipProps {
-  /** Text shown in the tooltip bubble */
-  label: string;
-  /** Single child element — must accept mouse/focus events */
-  children: React.ReactElement;
-  /** Which side to render the tooltip on (default: "top") */
-  side?: "top" | "bottom" | "left" | "right";
-  /** Delay before showing tooltip in ms (default: 400) */
-  delay?: number;
-  /**
-   * Enable long-press on touch devices to show a bottom-sheet tooltip panel.
-   * Designed for mobile where hover is not available. Default: true.
-   */
-  mobileSheet?: boolean;
-  /**
-   * Duration in ms to hold touch before the mobile sheet opens. Default: 500.
-   */
-  longPressDelay?: number;
-}
-
-/**
- * Tooltip wrapper. Injects `aria-label` into the child if not already present,
- * and shows a visible label bubble on hover/focus (desktop) or long-press
- * (mobile — opens an accessible bottom-sheet panel).
- *
- * @example
- * ```tsx
- * <Tooltip label="Add to wishlist">
- *   <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
- * </Tooltip>
- * ```
- */
-export function Tooltip({
-  label,
-  children,
-  side = "top",
-  delay = 400,
-  mobileSheet = true,
-  longPressDelay = 500,
-}: TooltipProps) {
-  const [visible, setVisible] = useState(false);
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const longPressRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
-      if (longPressRef.current !== null) clearTimeout(longPressRef.current);
-    };
-  }, []);
-
-  const showTooltip = () => {
-    timeoutRef.current = setTimeout(() => setVisible(true), delay);
-  };
-
-  const hideTooltip = () => {
-    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
-    setVisible(false);
-  };
-
-  // ── Long-press handlers for touch devices ──────────────────────────────────
-
-  const handleTouchStart = useCallback(() => {
-    if (!mobileSheet) return;
-    longPressRef.current = setTimeout(() => {
-      setMobileOpen(true);
-    }, longPressDelay);
-  }, [mobileSheet, longPressDelay]);
-
-  const handleTouchEnd = useCallback(() => {
-    if (longPressRef.current !== null) {
-      clearTimeout(longPressRef.current);
-      longPressRef.current = null;
-    }
-  }, []);
-
-  // Close mobile sheet on Escape
-  useEffect(() => {
-    if (!mobileOpen) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setMobileOpen(false);
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [mobileOpen]);
-
-  // Clone child to inject aria-label + mouse/focus/touch handlers
-  const existingProps = children.props as Record<string, unknown>;
-  const child = React.cloneElement(
-    children as React.ReactElement<Record<string, unknown>>,
-    {
-      "aria-label": (existingProps["aria-label"] as string | undefined) ?? label,
-      onMouseEnter: (e: React.MouseEvent) => {
-        if (typeof existingProps.onMouseEnter === "function")
-          existingProps.onMouseEnter(e);
-        showTooltip();
-      },
-      onMouseLeave: (e: React.MouseEvent) => {
-        if (typeof existingProps.onMouseLeave === "function")
-          existingProps.onMouseLeave(e);
-        hideTooltip();
-      },
-      onFocus: (e: React.FocusEvent) => {
-        if (typeof existingProps.onFocus === "function") existingProps.onFocus(e);
-        setVisible(true);
-      },
-      onBlur: (e: React.FocusEvent) => {
-        if (typeof existingProps.onBlur === "function") existingProps.onBlur(e);
-        hideTooltip();
-      },
-      onTouchStart: (e: React.TouchEvent) => {
-        if (typeof existingProps.onTouchStart === "function")
-          existingProps.onTouchStart(e);
-        handleTouchStart();
-      },
-      onTouchEnd: (e: React.TouchEvent) => {
-        if (typeof existingProps.onTouchEnd === "function")
-          existingProps.onTouchEnd(e);
-        handleTouchEnd();
-      },
-      onTouchCancel: (e: React.TouchEvent) => {
-        if (typeof existingProps.onTouchCancel === "function")
-          existingProps.onTouchCancel(e);
-        handleTouchEnd();
-      },
-    },
-  );
-
-  return (
-    <span className="relative inline-flex">
-      {child}
-
-      {/* Desktop tooltip bubble */}
-      {visible && (
-        <span
-          role="tooltip"
-          className={`${TOOLTIP_CONTENT} ${POSITION[side]}`}
-        >
-          {label}
-        </span>
-      )}
-
-      {/* Mobile long-press bottom sheet */}
-      {mobileOpen && (
-        <span
-          role="presentation"
-          className="fixed inset-0 z-50 md:hidden"
-          onClick={() => setMobileOpen(false)}
-        >
-          {/* Backdrop */}
-          <span
-            className="absolute inset-0 bg-black/40 backdrop-blur-sm"
-            aria-hidden="true"
-          />
-          {/* Panel */}
-          <span
-            role="tooltip"
-            aria-label={label}
-            className="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2 rounded-t-2xl bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 shadow-2xl px-6 py-5 pb-[calc(1.25rem+env(safe-area-inset-bottom,0px))]"
-          >
-            {/* Drag handle */}
-            <span
-              className="w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-600 mb-2"
-              aria-hidden="true"
-            />
-            <span className="text-sm font-medium text-zinc-800 dark:text-zinc-100 text-center">
-              {label}
-            </span>
-          </span>
-        </span>
-      )}
-    </span>
-  );
-}
-

package/src/ui/components/Typography.tsx

@@ -1,270 +0,0 @@
-import React from "react";
-
-/**
- * UI_THEME — inlined subset of the app-level THEME_CONSTANTS.
- * Consumer apps can override by passing `className` on each component.
- * Full THEME_CONSTANTS lives in the host app (`@/constants`).
- */
-const UI_THEME = {
-  typography: {
-    h1: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display",
-    h2: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display",
-    h3: "text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display",
-    h4: "text-lg md:text-xl lg:text-2xl font-bold font-display",
-    h5: "text-base md:text-lg lg:text-xl font-medium",
-    h6: "text-sm md:text-base lg:text-lg font-medium",
-    body: "text-base lg:text-lg",
-    small: "text-sm lg:text-base",
-    xs: "text-xs lg:text-sm",
-  },
-  themed: {
-    textPrimary: "text-zinc-900 dark:text-zinc-50",
-    textSecondary: "text-zinc-500 dark:text-zinc-400",
-    textMuted: "text-zinc-400 dark:text-zinc-500",
-    textError: "text-red-600 dark:text-red-400",
-    textSuccess: "text-emerald-600 dark:text-emerald-400",
-  },
-  colors: {
-    form: {
-      required: "text-red-500",
-    },
-  },
-} as const;
-
-// ─── Heading ─────────────────────────────────────────────────────────────────
-
-interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  variant?: "primary" | "secondary" | "muted" | "none";
-  children: React.ReactNode;
-}
-
-export function Heading({
-  level = 1,
-  variant = "primary",
-  className = "",
-  children,
-  ...props
-}: HeadingProps) {
-  const Tag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  const { typography, themed } = UI_THEME;
-
-  const sizeClasses = {
-    1: typography.h1,
-    2: typography.h2,
-    3: typography.h3,
-    4: typography.h4,
-    5: typography.h5,
-    6: typography.h6,
-  };
-
-  const variantClasses = {
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    none: "",
-  };
-
-  return (
-    <Tag
-      className={`${sizeClasses[level]} ${variantClasses[variant]} ${className}`}
-      {...props}
-    >
-      {children}
-    </Tag>
-  );
-}
-
-// ─── Text ─────────────────────────────────────────────────────────────────────
-
-interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
-  variant?: "primary" | "secondary" | "muted" | "error" | "success" | "none";
-  size?: "xs" | "sm" | "base" | "lg" | "xl";
-  weight?: "normal" | "medium" | "semibold" | "bold";
-  /** Override the rendered element. Defaults to `p`. */
-  as?: React.ElementType;
-  children: React.ReactNode;
-}
-
-export function Text({
-  variant = "primary",
-  size = "base",
-  weight = "normal",
-  className = "",
-  as: Tag = "p",
-  children,
-  ...props
-}: TextProps) {
-  const { typography, themed } = UI_THEME;
-
-  const sizeClasses = {
-    xs: typography.xs,
-    sm: typography.small,
-    base: typography.body,
-    lg: "text-lg",
-    xl: "text-xl",
-  };
-
-  const weightClasses = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold",
-  };
-
-  const variantClasses = {
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    error: themed.textError,
-    success: themed.textSuccess,
-    none: "",
-  };
-
-  return (
-    <Tag
-      className={`${sizeClasses[size]} ${weightClasses[weight]} ${variantClasses[variant]} ${className}`}
-      {...props}
-    >
-      {children}
-    </Tag>
-  );
-}
-
-// ─── Label ────────────────────────────────────────────────────────────────────
-
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  required?: boolean;
-  children: React.ReactNode;
-}
-
-export function Label({
-  required,
-  className = "",
-  children,
-  ...props
-}: LabelProps) {
-  const { themed, typography, colors } = UI_THEME;
-  return (
-    <label
-      className={`block ${typography.small} font-medium ${themed.textSecondary} mb-1.5 ${className}`}
-      {...props}
-    >
-      {children}
-      {required && <span className={`${colors.form.required} ml-1`}>*</span>}
-    </label>
-  );
-}
-
-// ─── Caption ─────────────────────────────────────────────────────────────────
-
-interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** "default" — muted grey (default); "accent" — indigo, semibold; "inverse" — light indigo for use on dark indigo backgrounds */
-  variant?: "default" | "accent" | "inverse";
-  children: React.ReactNode;
-}
-
-export function Caption({
-  variant = "default",
-  className = "",
-  children,
-  ...props
-}: CaptionProps) {
-  const { themed, typography } = UI_THEME;
-
-  const variantClasses = {
-    default: themed.textMuted,
-    accent: "text-primary font-semibold",
-    inverse: "text-primary/40",
-  };
-
-  return (
-    <span
-      className={`${typography.xs} ${variantClasses[variant]} ${className}`}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-}
-
-// ─── Span ─────────────────────────────────────────────────────────────────────
-/**
- * Inline wrapper for styled text fragments. Use instead of a raw `<span>`.
- * When `variant` is "inherit" (default) the element carries no colour classes
- * so it blends with its parent — perfect for purely structural/CSS wrappers.
- *
- * @example
- * ```tsx
- * <Span className="bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
- *   Highlighted
- * </Span>
- *
- * <Span variant="error" weight="semibold">Required</Span>
- * ```
- */
-interface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Colour variant. "inherit" (default) applies no colour class. */
-  variant?:
-    | "inherit"
-    | "primary"
-    | "secondary"
-    | "muted"
-    | "error"
-    | "success"
-    | "accent";
-  size?: "xs" | "sm" | "base" | "lg" | "xl";
-  weight?: "normal" | "medium" | "semibold" | "bold";
-  children?: React.ReactNode;
-}
-
-export function Span({
-  variant = "inherit",
-  size,
-  weight,
-  className = "",
-  children,
-  ...props
-}: SpanProps) {
-  const { themed, typography } = UI_THEME;
-
-  const variantClasses: Record<NonNullable<SpanProps["variant"]>, string> = {
-    inherit: "",
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    error: themed.textError,
-    success: themed.textSuccess,
-    accent: "text-primary",
-  };
-
-  const sizeClasses: Record<NonNullable<SpanProps["size"]>, string> = {
-    xs: typography.xs,
-    sm: typography.small,
-    base: typography.body,
-    lg: "text-lg",
-    xl: "text-xl",
-  };
-
-  const weightClasses: Record<NonNullable<SpanProps["weight"]>, string> = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold",
-  };
-
-  const classes = [
-    size ? sizeClasses[size] : "",
-    weight ? weightClasses[weight] : "",
-    variantClasses[variant],
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    <span className={classes} {...props}>
-      {children}
-    </span>
-  );
-}