@mohasinac/appkit 2.1.3 → 2.3.0

package/src/ui/components/Semantic.tsx

@@ -1,257 +0,0 @@
-import React from "react";
-
-/**
- * Semantic HTML Wrapper Components
- *
- * Thin wrappers around HTML5 semantic elements.
- * Using these instead of raw tags enables:
- *   - Future one-place theming (add default padding/colour here, it applies everywhere)
- *   - Enforced accessibility attributes (Nav requires aria-label)
- *   - Consistent documentation / IDE autocomplete
- *   - Clean migration path if element defaults change
- *
- * All components pass through every standard HTML attribute via `...props`.
- * Style via `className` using Tailwind CSS classes.
- *
- * @example
- * ```tsx
- * import { Section, Article, Main, Aside, Nav, Ul, Ol, Li } from '..';
- *
- * <Main className="max-w-7xl mx-auto px-4">
- *   <Section className="py-12">
- *     <Article>...</Article>
- *   </Section>
- *   <Aside className="w-64 shrink-0">...</Aside>
- * </Main>
- *
- * <Nav aria-label="Main navigation">
- *   <Ul className="flex gap-4">
- *     <Li>Products</Li>
- *   </Ul>
- * </Nav>
- * ```
- */
-
-// ─── Section ─────────────────────────────────────────────────────────────────
-/**
- * Semantic `<section>` element.
- * Use for thematically grouped content that would appear in an outline.
- * Prefer this over a plain `<div>` when the block has a heading.
- */
-export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-}
-
-export const Section = React.forwardRef<HTMLElement, SectionProps>(
-  ({ className = "", children, ...props }, ref) => (
-    <section className={className} ref={ref} {...props}>
-      {children}
-    </section>
-  ),
-);
-Section.displayName = "Section";
-
-// ─── Article ─────────────────────────────────────────────────────────────────
-/**
- * Semantic `<article>` element.
- * Use for self-contained compositions: blog posts, product cards, reviews, forum posts.
- */
-export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-}
-
-export function Article({ className = "", children, ...props }: ArticleProps) {
-  return (
-    <article className={className} {...props}>
-      {children}
-    </article>
-  );
-}
-
-// ─── Main ─────────────────────────────────────────────────────────────────────
-/**
- * Semantic `<main>` element.
- * Wraps the primary content of the document. Should appear only once per page.
- */
-export interface MainProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-}
-
-export function Main({ className = "", children, ...props }: MainProps) {
-  return (
-    <main className={className} {...props}>
-      {children}
-    </main>
-  );
-}
-
-// ─── Aside ────────────────────────────────────────────────────────────────────
-/**
- * Semantic `<aside>` element.
- * Use for supplementary content tangentially related to the main content:
- * sidebars, callout boxes, related-link panels.
- */
-export interface AsideProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-}
-
-export const Aside = React.forwardRef<HTMLElement, AsideProps>(
-  ({ className = "", children, ...props }, ref) => (
-    <aside className={className} ref={ref} {...props}>
-      {children}
-    </aside>
-  ),
-);
-Aside.displayName = "Aside";
-
-// ─── Nav ─────────────────────────────────────────────────────────────────────
-/**
- * Semantic `<nav>` element with enforced `aria-label`.
- *
- * Every `<nav>` on a page MUST have a unique `aria-label` so assistive
- * technologies can distinguish between multiple navigation landmarks.
- *
- * @example
- * ```tsx
- * <Nav aria-label="Breadcrumb">...</Nav>
- * <Nav aria-label="Product categories">...</Nav>
- * ```
- */
-export interface NavProps extends React.HTMLAttributes<HTMLElement> {
-  /** REQUIRED — describes the purpose of this navigation region for screen readers. */
-  "aria-label": string;
-  children: React.ReactNode;
-}
-
-export function Nav({ className = "", children, ...props }: NavProps) {
-  return (
-    <nav className={className} {...props}>
-      {children}
-    </nav>
-  );
-}
-
-// ─── Header (block-level) ─────────────────────────────────────────────────────
-/**
- * Semantic `<header>` element for block-level component headers.
- * Use inside `Section`, `Article`, or card bodies — NOT as the page-level header.
- *
- * @example
- * ```tsx
- * <Article>
- *   <BlockHeader className="mb-4">
- *     <Heading level={2}>Post title</Heading>
- *   </BlockHeader>
- * </Article>
- * ```
- */
-export interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-}
-
-export function BlockHeader({
-  className = "",
-  children,
-  ...props
-}: BlockHeaderProps) {
-  return (
-    <header className={className} {...props}>
-      {children}
-    </header>
-  );
-}
-
-// ─── Footer (block-level) ─────────────────────────────────────────────────────
-/**
- * Semantic `<footer>` element for block-level component footers.
- * Use inside `Section`, `Article`, or card bodies — NOT as the page-level footer.
- */
-export interface BlockFooterProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-}
-
-export function BlockFooter({
-  className = "",
-  children,
-  ...props
-}: BlockFooterProps) {
-  return (
-    <footer className={className} {...props}>
-      {children}
-    </footer>
-  );
-}
-
-// ─── Ul ──────────────────────────────────────────────────────────────────────
-/**
- * Semantic `<ul>` (unordered list) element.
- *
- * @example
- * ```tsx
- * <Ul className="space-y-2">
- *   <Li>Item one</Li>
- *   <Li>Item two</Li>
- * </Ul>
- * ```
- */
-export interface UlProps extends React.HTMLAttributes<HTMLUListElement> {
-  children: React.ReactNode;
-}
-
-export function Ul({ className = "", children, ...props }: UlProps) {
-  return (
-    <ul className={className} {...props}>
-      {children}
-    </ul>
-  );
-}
-
-// ─── Ol ──────────────────────────────────────────────────────────────────────
-/**
- * Semantic `<ol>` (ordered list) element.
- *
- * @example
- * ```tsx
- * <Ol className="list-decimal pl-4 space-y-1">
- *   <Li>Step one</Li>
- *   <Li>Step two</Li>
- * </Ol>
- * ```
- */
-export interface OlProps extends React.HTMLAttributes<HTMLOListElement> {
-  children: React.ReactNode;
-}
-
-export function Ol({ className = "", children, ...props }: OlProps) {
-  return (
-    <ol className={className} {...props}>
-      {children}
-    </ol>
-  );
-}
-
-// ─── Li ──────────────────────────────────────────────────────────────────────
-/**
- * Semantic `<li>` (list item) element. Use inside `Ul` or `Ol`.
- */
-export interface LiProps extends React.LiHTMLAttributes<HTMLLIElement> {
-  children: React.ReactNode;
-}
-
-export function Li({ className = "", children, ...props }: LiProps) {
-  return (
-    <li className={className} {...props}>
-      {children}
-    </li>
-  );
-}
-
-// ─── Header / Footer — convenience aliases ────────────────────────────────────
-/**
- * Aliases for `BlockHeader` and `BlockFooter`.
- * Use when importing from the standard `<Header>` / `<Footer>` names.
- */
-export type HeaderProps = BlockHeaderProps;
-export const Header = BlockHeader;
-export type FooterProps = BlockFooterProps;
-export const Footer = BlockFooter;

package/src/ui/components/SideModal.tsx

@@ -1,137 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef } from "react";
-import { Button, Div, Heading } from "..";
-
-// ─── SideModal ─────────────────────────────────────────────────────────────────
-
-export interface SideModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: string;
-  /** Default: "right". "left" opens from the left edge. */
-  side?: "left" | "right";
-  /** Width on desktop. Default: "60vw" clamped to max-w-2xl. */
-  width?: string;
-  children: React.ReactNode;
-  /** Extra class on the panel Div. */
-  className?: string;
-}
-
-/**
- * SideModal — slides in from the right (or left) on desktop (60 vw),
- * full-screen drawer on mobile (< sm breakpoint).
- *
- * Accessibility:
- *  - Traps focus inside the panel when open
- *  - Closes on Escape key
- *  - backdrop click closes panel
- *  - role="dialog" + aria-modal + aria-labelledby
- */
-export function SideModal({
-  isOpen,
-  onClose,
-  title,
-  side = "right",
-  children,
-  className = "",
-}: SideModalProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const titleId = useRef(`side-modal-title-${Math.random().toString(36).slice(2, 8)}`);
-
-  // Escape key handler
-  useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [isOpen, onClose]);
-
-  // Focus trap — move focus into panel on open
-  useEffect(() => {
-    if (isOpen) {
-      const el = panelRef.current;
-      if (el) {
-        const focusable = el.querySelector<HTMLElement>(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        );
-        focusable?.focus();
-      }
-    }
-  }, [isOpen]);
-
-  // Prevent body scroll while open
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  const translateOut = side === "right" ? "translate-x-full" : "-translate-x-full";
-  const origin = side === "right" ? "right-0" : "left-0";
-
-  return (
-    <Div
-      className="fixed inset-0 z-50 flex"
-      aria-hidden={!isOpen}
-    >
-      {/* Backdrop */}
-      <Div
-        className="absolute inset-0 bg-black/50 transition-opacity duration-300"
-        onClick={onClose}
-        aria-hidden="true"
-      />
-
-      {/* Panel */}
-      <Div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? titleId.current : undefined}
-        className={`
-          absolute inset-y-0 ${origin} flex flex-col
-          w-full sm:w-[min(60vw,_672px)]
-          bg-white dark:bg-zinc-900
-          shadow-2xl
-          transition-transform duration-300 ease-in-out
-          ${isOpen ? "translate-x-0" : translateOut}
-          ${className}
-        `}
-      >
-        {/* Header */}
-        {title && (
-          <Div className="flex items-center justify-between border-b border-neutral-200 dark:border-zinc-700 px-5 py-4 flex-shrink-0">
-            <Heading
-              level={2}
-              id={titleId.current}
-              className="text-base font-semibold text-neutral-900 dark:text-white truncate"
-            >
-              {title}
-            </Heading>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onClose}
-              aria-label="Close panel"
-              className="ml-2 flex-shrink-0"
-            >
-              ✕
-            </Button>
-          </Div>
-        )}
-
-        {/* Body — scrollable */}
-        <Div className="flex-1 overflow-y-auto p-5">{children}</Div>
-      </Div>
-    </Div>
-  );
-}

package/src/ui/components/Skeleton.tsx

@@ -1,82 +0,0 @@
-"use client";
-
-import React from "react";
-
-/**
- * Skeleton — content placeholder with pulse or wave animation.
- *
- * Extracted from src/components/ui/Skeleton.tsx for @mohasinac/ui.
- * Wave animation uses a plain <style> element (no styled-jsx dependency).
- */
-
-export interface SkeletonProps {
-  variant?: "text" | "circular" | "rectangular";
-  width?: string | number;
-  height?: string | number;
-  className?: string;
-  animation?: "pulse" | "wave" | "none";
-}
-
-// bgTertiary inlined from THEME_CONSTANTS.themed.bgTertiary
-const BG_TERTIARY = "bg-zinc-100 dark:bg-slate-800";
-
-const WAVE_CSS = `
-@keyframes appkit-skeleton-wave {
-  0% { transform: translateX(-100%); }
-  50%, 100% { transform: translateX(100%); }
-}
-.appkit-skeleton-wave {
-  position: relative;
-  overflow: hidden;
-}
-.appkit-skeleton-wave::after {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
-  animation: appkit-skeleton-wave 1.5s infinite;
-}
-`;
-
-export function Skeleton({
-  variant = "text",
-  width,
-  height,
-  className = "",
-  animation = "pulse",
-}: SkeletonProps) {
-  const variantClass = variant === "circular" ? "rounded-full" : "rounded";
-
-  const defaultSize = {
-    circular: { width: "40px", height: "40px" },
-    rectangular: { width: "100%", height: "140px" },
-    text: { width: "100%", height: "1em" },
-  }[variant];
-
-  const animationClass = {
-    pulse: "animate-pulse",
-    wave: "appkit-skeleton-wave",
-    none: "",
-  }[animation];
-
-  const style: React.CSSProperties = {
-    width: width ?? defaultSize.width,
-    height: height ?? defaultSize.height,
-  };
-
-  return (
-    <>
-      {animation === "wave" && (
-        <style dangerouslySetInnerHTML={{ __html: WAVE_CSS }} />
-      )}
-      <div
-        className={`${BG_TERTIARY} ${variantClass} ${animationClass} ${className}`}
-        style={style}
-        role="status"
-        aria-label="Loading"
-      >
-        <span className="sr-only">Loading...</span>
-      </div>
-    </>
-  );
-}

package/src/ui/components/Slider.tsx

@@ -1,35 +0,0 @@
-
-export interface SliderProps {
-  value?: number;
-  min?: number;
-  max?: number;
-  step?: number;
-  onChange?: (value: number) => void;
-  className?: string;
-  disabled?: boolean;
-}
-
-export function Slider({
-  value = 0,
-  min = 0,
-  max = 100,
-  step = 1,
-  onChange,
-  className = "",
-  disabled = false,
-}: SliderProps) {
-  return (
-    <input
-      type="range"
-      min={min}
-      max={max}
-      step={step}
-      value={value}
-      disabled={disabled}
-      onChange={(e) => onChange?.(Number(e.target.value))}
-      className={["w-full accent-primary dark:accent-secondary", className]
-        .filter(Boolean)
-        .join(" ")}
-    />
-  );
-}

package/src/ui/components/SortDropdown.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import React from "react";
-import { Row } from "./Layout";
-import { Select } from "./Select";
-import { Span } from "./Typography";
-
-export interface SortOption {
-  label: string;
-  value: string;
-}
-
-export interface SortDropdownProps {
-  value?: string;
-  onChange: (value: string) => void;
-  options: SortOption[];
-  label?: string;
-  className?: string;
-}
-
-export function SortDropdown({
-  value,
-  onChange,
-  options,
-  label,
-  className = "",
-}: SortDropdownProps) {
-  return (
-    <Row gap="sm" className={className}>
-      {label && (
-        <Span variant="secondary" size="sm" className="whitespace-nowrap">
-          {label}
-        </Span>
-      )}
-      <Select
-        value={value ?? ""}
-        onChange={onChange}
-        options={options}
-        className="h-9 min-h-9"
-      />
-    </Row>
-  );
-}

package/src/ui/components/Spinner.tsx

@@ -1,48 +0,0 @@
-
-/**
- * Spinner — generic loading indicator.
- *
- * Extracted from src/components/ui/Spinner.tsx for @mohasinac/ui.
- * No app-specific imports; pure Tailwind CSS.
- */
-
-export interface SpinnerProps {
-  size?: "sm" | "md" | "lg" | "xl";
-  variant?: "primary" | "white" | "current";
-  className?: string;
-  label?: string;
-}
-
-export function Spinner({
-  size = "md",
-  variant = "primary",
-  className = "",
-  label = "Loading...",
-}: SpinnerProps) {
-  const sizeClasses: Record<NonNullable<SpinnerProps["size"]>, string> = {
-    sm: "w-4 h-4 border-2",
-    md: "w-8 h-8 border-2",
-    lg: "w-12 h-12 border-[3px]",
-    xl: "w-16 h-16 border-4",
-  };
-
-  const variantClasses: Record<NonNullable<SpinnerProps["variant"]>, string> = {
-    primary:
-      "border-primary-600 border-t-transparent dark:border-secondary-500 dark:border-t-transparent",
-    white: "border-white border-t-transparent",
-    current: "border-current border-t-transparent",
-  };
-
-  return (
-    <div
-      className={`inline-flex items-center gap-3 ${className}`}
-      role="status"
-      aria-label={label}
-    >
-      <div
-        className={`${sizeClasses[size]} ${variantClasses[variant]} rounded-full animate-spin force-spin`}
-      />
-      {label && <span className="sr-only">{label}</span>}
-    </div>
-  );
-}

package/src/ui/components/StarRating.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Star } from "lucide-react";
-import { Span } from "./Typography";
-
-/**
- * StarRating — 0–5 star display/interactive rating.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Use `readOnly` for display, omit it for interactive mode with hover preview.
- */
-
-export interface StarRatingProps {
-  value?: number;
-  onChange?: (value: number) => void;
-  max?: number;
-  size?: "sm" | "md" | "lg";
-  readOnly?: boolean;
-  className?: string;
-  /** Accessible label describing what is being rated */
-  label?: string;
-}
-
-const SIZE_PX = { sm: "w-4 h-4", md: "w-5 h-5", lg: "w-6 h-6" } as const;
-
-export function StarRating({
-  value = 0,
-  onChange,
-  max = 5,
-  size = "md",
-  readOnly = false,
-  className = "",
-  label,
-}: StarRatingProps) {
-  const [hovered, setHovered] = useState<number | null>(null);
-
-  const displayed = hovered ?? value;
-
-  return (
-    <Span
-      className={`inline-flex items-center gap-0.5 ${className}`}
-      role={readOnly ? "img" : "group"}
-      aria-label={label ?? `${value} out of ${max} stars`}
-    >
-      {Array.from({ length: max }, (_, i) => {
-        const starValue = i + 1;
-        const filled = starValue <= displayed;
-        const half = !filled && starValue - 0.5 <= displayed;
-
-        return (
-          <Span
-            key={starValue}
-            className={readOnly ? undefined : "cursor-pointer"}
-            onClick={() => !readOnly && onChange?.(starValue)}
-            onMouseEnter={() => !readOnly && setHovered(starValue)}
-            onMouseLeave={() => !readOnly && setHovered(null)}
-            aria-hidden={!readOnly ? "true" : undefined}
-          >
-            <Star
-              className={[
-                SIZE_PX[size],
-                "transition-colors duration-100",
-                filled || half
-                  ? "fill-amber-400 text-amber-400"
-                  : "fill-transparent text-zinc-300 dark:text-slate-600",
-                !readOnly && !filled
-                  ? "hover:fill-amber-300 hover:text-amber-300"
-                  : "",
-              ].join(" ")}
-              aria-hidden="true"
-            />
-          </Span>
-        );
-      })}
-
-      {/* Screen-reader-only value for interactive mode */}
-      {!readOnly && (
-        <Span className="sr-only">
-          {value} out of {max}
-        </Span>
-      )}
-    </Span>
-  );
-}