@mohasinac/appkit 2.1.3 → 2.3.0

package/src/ui/components/Drawer.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import React, { useCallback, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { X } from "lucide-react";
-import { Heading } from "./Typography";
-import { Button } from "./Button";
-
-/**
- * Drawer — slide-in panel from left, right, or bottom.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Bottom variant gets `rounded-t-2xl` and can be swipe-dismissed via drag handle.
- */
-
-export interface DrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  side?: "left" | "right" | "bottom";
-  /** Width for left/right drawers. Default: 'md' */
-  size?: "sm" | "md" | "lg" | "full";
-  showCloseButton?: boolean;
-  className?: string;
-}
-
-const SIDE_TRANSLATE = {
-  left: {
-    closed: "-translate-x-full",
-    open: "translate-x-0",
-    base: "left-0 top-0 bottom-0",
-  },
-  right: {
-    closed: "translate-x-full",
-    open: "translate-x-0",
-    base: "right-0 top-0 bottom-0",
-  },
-  bottom: {
-    closed: "translate-y-full",
-    open: "translate-y-0",
-    base: "bottom-0 left-0 right-0",
-  },
-} as const;
-
-const SIDE_SIZE: Record<"sm" | "md" | "lg" | "full", string> = {
-  sm: "w-72",
-  md: "w-80 sm:w-96",
-  lg: "w-full sm:w-[480px]",
-  full: "w-full",
-};
-
-export function Drawer({
-  isOpen,
-  onClose,
-  title,
-  children,
-  footer,
-  side = "right",
-  size = "md",
-  showCloseButton = true,
-  className = "",
-}: DrawerProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const prevFocusRef = useRef<HTMLElement | null>(null);
-
-  // Body scroll lock
-  useEffect(() => {
-    if (!isOpen) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [isOpen]);
-
-  // Focus management
-  useEffect(() => {
-    if (isOpen) {
-      prevFocusRef.current = document.activeElement as HTMLElement;
-      requestAnimationFrame(() => panelRef.current?.focus());
-    } else {
-      prevFocusRef.current?.focus();
-    }
-  }, [isOpen]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    },
-    [onClose],
-  );
-
-  const { closed, open, base } = SIDE_TRANSLATE[side];
-  const isBottom = side === "bottom";
-
-  if (typeof document === "undefined") return null;
-
-  return createPortal(
-    <div
-      className={`fixed inset-0 z-50 ${isOpen ? "pointer-events-auto" : "pointer-events-none"}`}
-      onKeyDown={handleKeyDown}
-    >
-      {/* Backdrop */}
-      <div
-        className={`absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0"}`}
-        aria-hidden="true"
-        onClick={onClose}
-      />
-
-      {/* Panel */}
-      <div
-        ref={panelRef}
-        tabIndex={-1}
-        role="dialog"
-        aria-modal="true"
-        className={[
-          "absolute bg-white dark:bg-slate-900",
-          "shadow-2xl ring-1 ring-zinc-200 dark:ring-slate-700",
-          "flex flex-col",
-          "transition-transform duration-300 ease-out",
-          base,
-          isBottom ? "rounded-t-2xl max-h-[90vh]" : `${SIDE_SIZE[size]} h-full`,
-          isOpen ? open : closed,
-          className,
-        ].join(" ")}
-      >
-        {/* Drag handle (bottom drawer only) */}
-        {isBottom && (
-          <div className="flex justify-center pt-3 pb-1 flex-shrink-0">
-            <div
-              className="w-10 h-1 rounded-full bg-zinc-300 dark:bg-slate-600"
-              aria-hidden="true"
-            />
-          </div>
-        )}
-
-        {/* Header */}
-        {(title || showCloseButton) && (
-          <div className="flex items-center justify-between px-5 py-4 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0">
-            {title && (
-              <Heading
-                level={2}
-                className="!text-base !font-semibold !font-sans"
-              >
-                {title}
-              </Heading>
-            )}
-            {showCloseButton && (
-              <Button
-                variant="ghost"
-                size="sm"
-                type="button"
-                onClick={onClose}
-                className="ml-auto p-1.5 !min-h-0 rounded-lg text-zinc-400 hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-300"
-                aria-label="Close"
-              >
-                <X className="w-5 h-5" />
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Scrollable body */}
-        <div className="flex-1 overflow-y-auto px-5 py-4">{children}</div>
-
-        {/* Footer */}
-        {footer && (
-          <div className="flex-shrink-0 border-t border-zinc-100 dark:border-slate-800 px-5 py-4">
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body,
-  );
-}

package/src/ui/components/Form.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
-  children: React.ReactNode;
-}
-
-/**
- * Semantic `<form>` wrapper. Passes all standard form attributes through.
- * Use with `react-hook-form`:
- *
- * ```tsx
- * const { handleSubmit } = useForm();
- * <Form onSubmit={handleSubmit(onSubmit)}>
- *   <FormGrid>...</FormGrid>
- *   <Button type="submit">Submit</Button>
- * </Form>
- * ```
- */
-export function Form({ children, className = "", ...props }: FormProps) {
-  return (
-    <form className={className} {...props}>
-      {children}
-    </form>
-  );
-}

package/src/ui/components/FormGrid.tsx

@@ -1,82 +0,0 @@
-// appkit/src/ui/components/FormGrid.tsx
-import type { ReactNode } from "react";
-
-export interface FormGridProps {
-  children: ReactNode;
-  /** Minimum field width in pixels before wrapping to a new row (default: 280) */
-  minFieldWidth?: number;
-  /** Gap between fields in pixels (default: 16) */
-  gap?: number;
-  className?: string;
-}
-
-export interface FormFieldProps {
-  children: ReactNode;
-  /**
-   * - `"auto"` — fluid: `flex-1 min-w-[280px]` (default)
-   * - `"full"` — always full width
-   * - `"half"` — fixed 50%, min-width still respected
-   */
-  span?: "auto" | "full" | "half";
-  className?: string;
-}
-
-/**
- * `FormGrid` — a flex-wrap container that naturally transitions from
- * multi-column to single-column without media queries.
- *
- * **Column count at given widths** (default minFieldWidth=280, gap=16):
- * | Container | Columns |
- * |-----------|---------|
- * | 360 px    | 1       |
- * | 600 px    | 2       |
- * | 900 px    | 3       |
- * | 1200 px   | 4       |
- *
- * @example
- * ```tsx
- * <FormGrid>
- *   <FormField><Label>First name</Label><Input name="firstName" /></FormField>
- *   <FormField><Label>Last name</Label><Input name="lastName" /></FormField>
- *   <FormField span="full"><Label>Bio</Label><Textarea name="bio" /></FormField>
- * </FormGrid>
- * ```
- */
-export function FormGrid({
-  children,
-  minFieldWidth = 280,
-  gap = 16,
-  className,
-}: FormGridProps) {
-  return (
-    <div
-      className={`flex flex-wrap ${className ?? ""}`}
-      style={{ gap: `${gap}px` }}
-    >
-      {children}
-    </div>
-  );
-}
-
-/**
- * `FormField` — a single form field slot inside a `FormGrid`.
- * Grows/shrinks to fill available space while respecting `minFieldWidth`.
- */
-export function FormField({
-  children,
-  span = "auto",
-  className,
-}: FormFieldProps) {
-  const spanClass =
-    span === "full"
-      ? "w-full"
-      : span === "half"
-        ? "w-1/2 min-w-[280px]"
-        : "flex-1 min-w-[280px]";
-
-  return (
-    <div className={`${spanClass} flex flex-col gap-1.5 ${className ?? ""}`}>
-      {children}
-    </div>
-  );
-}

package/src/ui/components/HorizontalScroller.tsx

@@ -1,183 +0,0 @@
-"use client";
-
-import {
-  useRef,
-  useEffect,
-  useCallback,
-  type RefObject,
-  type ReactNode,
-} from "react";
-
-export interface PerViewConfig {
-  base?: number;
-  xs?: number;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-  "2xl"?: number;
-}
-
-export interface HorizontalScrollerProps<T = unknown> {
-  children?: ReactNode;
-  className?: string;
-  gap?: number;
-  snapToItems?: boolean;
-  showArrows?: boolean;
-  arrowSize?: "sm" | "md" | "lg";
-  showScrollbar?: boolean;
-  showFadeEdges?: boolean;
-  scrollContainerRef?: RefObject<HTMLDivElement | null>;
-  onScroll?: () => void;
-  items?: T[];
-  renderItem?: (item: T, index: number) => ReactNode;
-  keyExtractor?: (item: T, index: number) => string;
-  perView?: number | PerViewConfig;
-  rows?: number;
-  autoScroll?: boolean;
-  autoScrollInterval?: number;
-  minItemWidth?: number;
-  pauseOnHover?: boolean;
-  itemClassName?: string;
-}
-
-export function HorizontalScroller<T = unknown>({
-  children,
-  className = "",
-  gap = 16,
-  snapToItems,
-  showArrows,
-  arrowSize = "md",
-  showScrollbar,
-  showFadeEdges,
-  scrollContainerRef: externalRef,
-  onScroll,
-  items,
-  renderItem,
-  keyExtractor,
-  perView,
-  rows = 1,
-  autoScroll,
-  autoScrollInterval = 3500,
-  minItemWidth,
-  itemClassName = "",
-}: HorizontalScrollerProps<T>) {
-  void perView;
-  void rows;
-
-  const internalRef = useRef<HTMLDivElement>(null);
-  const containerRef = (externalRef ??
-    internalRef) as RefObject<HTMLDivElement>;
-  const autoScrollTimer = useRef<ReturnType<typeof setInterval> | undefined>(
-    undefined,
-  );
-
-  const scrollBy = useCallback(
-    (direction: 1 | -1) => {
-      const el = containerRef.current;
-      if (!el) return;
-      const width = el.clientWidth;
-      el.scrollBy({ left: direction * width * 0.8, behavior: "smooth" });
-    },
-    [containerRef],
-  );
-
-  useEffect(() => {
-    if (!autoScroll) return;
-    autoScrollTimer.current = setInterval(
-      () => scrollBy(1),
-      autoScrollInterval,
-    );
-    return () => clearInterval(autoScrollTimer.current);
-  }, [autoScroll, autoScrollInterval, scrollBy]);
-
-  const itemsMode = items != null && renderItem != null;
-
-  const arrowCls = {
-    sm: "w-7 h-7 text-sm",
-    md: "w-9 h-9 text-base",
-    lg: "w-11 h-11 text-lg",
-  }[arrowSize];
-
-  const scrollerCls = [
-    "flex h-full overflow-x-auto scroll-smooth",
-    snapToItems ? "snap-x snap-mandatory" : "",
-    showScrollbar ? "" : "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-    "pb-1",
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  const content = itemsMode
-    ? items.map((item, i) => (
-        <div
-          key={keyExtractor ? keyExtractor(item, i) : i}
-          className={[
-            snapToItems ? "snap-start flex-none" : "flex-none",
-            itemClassName,
-          ]
-            .filter(Boolean)
-            .join(" ")}
-          style={minItemWidth ? { minWidth: minItemWidth } : undefined}
-        >
-          {renderItem(item, i)}
-        </div>
-      ))
-    : children;
-
-  if (showArrows) {
-    return (
-      <div className={`relative ${className}`}>
-        {showFadeEdges && (
-          <>
-            <div className="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" />
-            <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" />
-          </>
-        )}
-        <button
-          type="button"
-          onClick={() => scrollBy(-1)}
-          aria-label="Previous"
-          className={`absolute left-0 top-1/2 -translate-y-1/2 z-20 ${arrowCls} rounded-full bg-white/90 dark:bg-gray-800/90 border border-gray-200 dark:border-gray-700 shadow flex items-center justify-center hover:bg-white dark:hover:bg-gray-700 transition-colors`}
-        >
-          {"<"}
-        </button>
-        <div
-          ref={containerRef}
-          onScroll={onScroll}
-          className={scrollerCls}
-          style={{ gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }}
-        >
-          {content}
-        </div>
-        <button
-          type="button"
-          onClick={() => scrollBy(1)}
-          aria-label="Next"
-          className={`absolute right-0 top-1/2 -translate-y-1/2 z-20 ${arrowCls} rounded-full bg-white/90 dark:bg-gray-800/90 border border-gray-200 dark:border-gray-700 shadow flex items-center justify-center hover:bg-white dark:hover:bg-gray-700 transition-colors`}
-        >
-          {">"}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`relative ${className}`}>
-      {showFadeEdges && (
-        <>
-          <div className="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" />
-          <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" />
-        </>
-      )}
-      <div
-        ref={containerRef}
-        onScroll={onScroll}
-        className={scrollerCls}
-        style={{ gap: `${gap}px` }}
-      >
-        {content}
-      </div>
-    </div>
-  );
-}

package/src/ui/components/IconButton.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { twMerge } from "tailwind-merge";
-
-const BASE =
-  "inline-flex items-center justify-center flex-shrink-0 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
-
-const SIZES = {
-  sm: "h-8 w-8 rounded-lg",
-  md: "h-10 w-10 rounded-xl",
-  lg: "h-12 w-12 rounded-xl",
-} as const;
-
-const VARIANTS = {
-  ghost:
-    "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800 focus:ring-zinc-400",
-  outline:
-    "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-transparent text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:ring-zinc-400",
-  primary:
-    "bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 dark:bg-secondary-500 dark:hover:bg-secondary-400",
-  danger:
-    "text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 focus:ring-red-500",
-} as const;
-
-export interface IconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Required — text alternative for screen readers. Also shown as tooltip. */
-  "aria-label": string;
-  /** Icon element to display (usually a Lucide icon). Falls back to children. */
-  icon?: React.ReactNode;
-  size?: keyof typeof SIZES;
-  variant?: keyof typeof VARIANTS;
-}
-
-/**
- * Icon-only button. `aria-label` is required — will throw in development if omitted.
- *
- * @example
- * ```tsx
- * <Tooltip label="Add to wishlist">
- *   <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
- * </Tooltip>
- * ```
- */
-export function IconButton({
-  size = "md",
-  variant = "ghost",
-  className = "",
-  icon,
-  children,
-  ...props
-}: IconButtonProps) {
-  if (
-    process.env.NODE_ENV !== "production" &&
-    !props["aria-label"]
-  ) {
-    throw new Error(
-      '[IconButton] Missing required "aria-label" prop. ' +
-        "Add aria-label=\"...\" to the button or wrap with <Tooltip label=\"...\">.",
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      className={twMerge(BASE, SIZES[size], VARIANTS[variant], className)}
-      {...props}
-    >
-      {icon ?? children}
-    </button>
-  );
-}