@apptimate/ui 1.0.0 → 1.2.0

package/src/base-components/DesktopSearchPopover.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Search } from 'lucide-react';
+import { Dropdown } from './Dropdown';
+import { Input } from './Input';
+import { Button } from './Button';
+import { cn } from '@apptimate/core-lib';
+
+export interface DesktopSearchPopoverProps {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    triggerClassName?: string;
+}
+
+export const DesktopSearchPopover = ({
+    searchValue,
+    onSearchChange,
+    placeholder = "Search...",
+    className,
+    triggerClassName
+}: DesktopSearchPopoverProps) => {
+    return (
+        <div className={cn("hidden lg:block", className)}>
+            <Dropdown
+                align="right"
+                contentClassName="w-[300px] p-2"
+                trigger={
+                    <Button
+                        variant="soft"
+                        color="default"
+                        className={cn("!p-0 text-gray-500", triggerClassName)}
+                        icon={<Search size={18} strokeWidth={2} />}
+                        ariaLabel="Search"
+                    />
+                }
+            >
+                <div className="p-1">
+                    <Input
+                        autoFocus
+                        placeholder={placeholder}
+                        icon={<Search size={16} className="text-gray-400" />}
+                        className="[&_input]:rounded-[8px] [&_input]:border [&_input]:border-gray-200 [&_input]:bg-white [&_input]:hover:border-gray-300 [&_input]:focus:border-gray-300 w-full"
+                        value={searchValue}
+                        onChange={(e) => onSearchChange(e.target.value)}
+                    />
+                </div>
+            </Dropdown>
+        </div>
+    );
+};

package/src/{Dropdown.tsx → base-components/Dropdown.tsx}

@@ -8,13 +8,14 @@ interface DropdownProps {
     trigger: ReactNode;
     children: ReactNode;
     align?: 'left' | 'right';
+    valign?: 'top' | 'bottom';
     className?: string;
     contentClassName?: string;
 }
 
-export function Dropdown({ trigger, children, align = 'left', className, contentClassName }: DropdownProps) {
+export function Dropdown({ trigger, children, align = 'left', valign = 'bottom', className, contentClassName }: DropdownProps) {
     const [isOpen, setIsOpen] = useState(false);
-    const [coords, setCoords] = useState({ top: 0, left: 0, right: 0 });
+    const [coords, setCoords] = useState({ top: 0, bottom: 0, left: 0, right: 0 });
     const dropdownRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
 
@@ -22,7 +23,8 @@ export function Dropdown({ trigger, children, align = 'left', className, content
         if (dropdownRef.current) {
             const rect = dropdownRef.current.getBoundingClientRect();
             setCoords({
-                top: rect.bottom + window.scrollY,
+                top: rect.top + window.scrollY,
+                bottom: rect.bottom + window.scrollY,
                 left: rect.left + window.scrollX,
                 right: window.innerWidth - rect.right - window.scrollX
             });
@@ -86,11 +88,15 @@ export function Dropdown({ trigger, children, align = 'left', className, content
                     ref={contentRef}
                     style={{
                         position: 'absolute',
-                        top: `${coords.top}px`,
+                        ...(valign === 'bottom' 
+                            ? { top: `${coords.bottom}px` } 
+                            : { bottom: `${window.innerHeight - coords.top}px` }
+                        ),
                         ...(align === 'left' ? { left: `${coords.left}px` } : { right: `${coords.right}px` })
                     }}
                     className={cn(
-                        "z-[9999] mt-1.5 min-w-[160px] rounded-[10px] bg-surface-0 border border-border-default shadow-[0_4px_12px_rgba(0,0,0,0.05)] p-1.5 animate-in fade-in zoom-in-95 duration-200",
+                        "z-[9999] min-w-[160px] rounded-[10px] bg-white border border-gray-200 shadow-[0_8px_30px_rgb(0,0,0,0.12)] p-1.5 animate-in fade-in zoom-in-95 duration-200",
+                        valign === 'bottom' ? "mt-1.5" : "mb-1.5",
                         contentClassName
                     )}
                     onClick={closeDropdown}

package/src/base-components/ImageDropzone.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import React, { useRef } from "react";
+import { Upload } from "lucide-react";
+
+export interface ImageDropzoneProps {
+  onDrop: (files: File[]) => void;
+  maxSizeMB?: number;
+  maxFiles?: number;
+  accept?: string;
+  className?: string;
+  title?: string;
+  subtitle?: string;
+  isLoading?: boolean;
+}
+
+export function ImageDropzone({
+  onDrop,
+  maxSizeMB = 5,
+  maxFiles = 10,
+  accept = "image/*",
+  className = "",
+  title = "Drop images here or click to upload",
+  subtitle = "JPEG, PNG, WebP — max 5MB each, up to 10 images",
+  isLoading = false,
+}: ImageDropzoneProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (isLoading) return;
+    const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+    if (files.length) {
+      onDrop(files.slice(0, maxFiles));
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isLoading) return;
+    const files = Array.from(e.target.files || []);
+    if (files.length) {
+      onDrop(files.slice(0, maxFiles));
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={handleFileDrop}
+      onClick={() => fileInputRef.current?.click()}
+      className={`border-2 border-dashed border-gray-200 hover:border-primary-300 rounded-xl p-6 flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-primary-50/30 group ${
+        isLoading ? "opacity-50 cursor-not-allowed" : ""
+      } ${className}`}
+    >
+      <div className="w-10 h-10 rounded-full bg-gray-100 group-hover:bg-primary-100 flex items-center justify-center mb-2 transition-colors">
+        {isLoading ? (
+          <div className="w-5 h-5 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
+        ) : (
+          <Upload size={18} className="text-gray-400 group-hover:text-primary-500" />
+        )}
+      </div>
+      <p className="text-[13px] font-medium text-gray-500 group-hover:text-primary-600">
+        {isLoading ? "Uploading..." : title}
+      </p>
+      <p className="text-[11px] text-gray-400 mt-0.5">{subtitle}</p>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={maxFiles > 1}
+        className="hidden"
+        onChange={handleFileSelect}
+        disabled={isLoading}
+      />
+    </div>
+  );
+}

package/src/{Input.tsx → base-components/Input.tsx}

@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import { cn } from '@apptimate/core-lib';
 import { Eye, EyeOff } from 'lucide-react';
+import { Label } from './Label';
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
@@ -20,13 +21,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         return (
             <div className={cn("flex flex-col gap-1.5 w-full", className)}>
                 {label && (
-                    <label className="text-[12px] font-semibold text-foreground-subtle tracking-[0.3px] uppercase">
-                        {label} {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
-                    </label>
+                    <Label isRequired={isRequired}>
+                        {label}
+                    </Label>
                 )}
                 <div className="relative group">
                     {icon && (
-                        <div className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-disabled group-focus-within:text-primary transition-colors">
+                        <div className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-disabled group-focus-within:text-[#2D3142] transition-colors">
                             {icon}
                         </div>
                     )}
@@ -34,10 +35,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                         ref={ref}
                         type={inputType}
                         className={cn(
-                             "w-full bg-surface-0 border-1.5 border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all focus:border-primary focus:bg-surface-1 placeholder:text-foreground-disabled",
+                             "w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 placeholder:text-foreground-disabled",
                             icon && "pl-10",
                             isPassword && "pr-10",
-                            error && "border-danger-alt focus:border-danger-alt"
+                            error && "border-danger-alt focus:border-danger-alt hover:border-danger-alt"
                         )}
                         {...props}
                     />
@@ -45,7 +46,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                         <button
                             type="button"
                             onClick={() => setShowPassword(!showPassword)}
-                            className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground-disabled hover:text-primary transition-colors"
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground-disabled hover:text-[#2D3142] transition-colors"
                         >
                             {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                         </button>

package/src/base-components/Label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@apptimate/core-lib';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    isRequired?: boolean;
+}
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+    ({ children, className, isRequired, ...props }, ref) => {
+        return (
+            <label 
+                ref={ref} 
+                className={cn("text-[11px] font-normal text-gray-500 tracking-normal apptimate-input-label", className)} 
+                {...props}
+            >
+                {children} {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
+            </label>
+        );
+    }
+);
+
+Label.displayName = 'Label';

package/src/{Modal.tsx → base-components/Modal.tsx}

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X } from 'lucide-react';
 import { cn } from '@apptimate/core-lib';
@@ -14,9 +15,16 @@ export interface ModalProps {
     footer?: React.ReactNode;
     backdrop?: 'transparent' | 'opaque' | 'blur';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    position?: 'center' | 'bottom';
+    /** Override z-index layer (default 50). Increase for nested modals. */
+    zIndex?: number;
 }
 
-export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm' }: ModalProps) => {
+export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm', position = 'center', zIndex }: ModalProps) => {
+    // SSR-safe portal mount guard — document is only available on the client
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => { setMounted(true); }, []);
+
     useEffect(() => {
         if (isOpen) {
             document.body.style.overflow = 'hidden';
@@ -43,10 +51,14 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
         full: 'max-w-[100vw]',
     };
 
-    return (
+    const content = (
         <AnimatePresence>
             {isOpen && (
-                <div className={cn("fixed inset-0 z-50 flex items-center justify-center", size === 'full' ? 'p-0' : 'p-2 sm:p-4')}>
+                <div className={cn(
+                    "fixed inset-0 flex",
+                    position === 'center' ? "items-center justify-center p-2 sm:p-4" : "items-end justify-center sm:items-center p-0 sm:p-4",
+                    size === 'full' ? 'p-0 sm:p-0' : ''
+                )} style={{ zIndex: zIndex ?? 50 }}>
                     <motion.div
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
@@ -55,19 +67,20 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
                         className={backdropClasses}
                     />
                     <motion.div
-                        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-                        animate={{ opacity: 1, scale: 1, y: 0 }}
-                        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                        initial={position === 'bottom' ? { opacity: 0, y: "100%" } : { opacity: 0, scale: 0.95, y: 20 }}
+                        animate={position === 'bottom' ? { opacity: 1, y: 0 } : { opacity: 1, scale: 1, y: 0 }}
+                        exit={position === 'bottom' ? { opacity: 0, y: "100%" } : { opacity: 0, scale: 0.95, y: 20 }}
+                        transition={{ type: "spring", damping: 25, stiffness: 300 }}
                         className={cn(
                             "relative w-full bg-surface-1 shadow-[0_8px_40px_rgba(0,0,0,0.2)] flex flex-col overflow-hidden",
-                            size === 'full' ? "rounded-none h-screen max-h-screen" : "rounded-[16px] sm:rounded-[24px] max-h-[90vh]",
+                            size === 'full' ? "rounded-none h-screen max-h-screen" : position === 'bottom' ? "rounded-t-[24px] sm:rounded-[24px] max-h-[90vh]" : "rounded-[16px] sm:rounded-[24px] max-h-[90vh]",
                             sizeClasses[size],
                             className
                         )}
                     >
                         {/* Header */}
                         <div className="flex items-center justify-between px-5 sm:px-8 py-4 border-b border-surface-0">
-                            <h3 className="text-[16px] sm:text-[18px] font-bold text-foreground-0 tracking-tight">{title}</h3>
+                            <h3 className="text-[16px] sm:text-[18px] font-bold text-foreground-0 tracking-tight flex-1 min-w-0">{title}</h3>
                             <button
                                 onClick={onClose}
                                 className="w-8 h-8 rounded-full flex items-center justify-center text-foreground-disabled hover:bg-surface-0 hover:text-foreground-0 transition-all"
@@ -86,7 +99,7 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
 
                         {/* Footer */}
                         {footer && (
-                            <div className="px-5 sm:px-8 py-4 sm:py-6 bg-surface-subtle border-t border-surface-0 flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
+                            <div className="px-5 sm:px-8 pb-5 flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
                                 {footer}
                             </div>
                         )}
@@ -95,4 +108,17 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
             )}
         </AnimatePresence>
     );
+
+    // Always render via a portal into <body> so the modal escapes any parent
+    // stacking context created by Framer Motion transforms or CSS transforms.
+    if (!mounted) return null;
+    return createPortal(content, document.body);
+};
+
+export const ModalFooter = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+    return (
+        <div className={cn("flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 pt-4 sm:pt-6", className)}>
+            {children}
+        </div>
+    );
 };

package/src/{PopConfirm.tsx → base-components/PopConfirm.tsx}

@@ -12,8 +12,8 @@ export interface PopConfirmProps {
   /** Element that triggers the popover (e.g. Button) */
   trigger: React.ReactElement<{ onClick?: (e: React.MouseEvent) => void }>;
 
-  /** Called when user confirms. Call callback() to close. setLoading controls confirm button loading state. */
-  onConfirm: (callback: () => void, setLoading: (loading: boolean) => void) => void;
+  /** Called when user confirms. Call callback() to close. Returning a Promise automatically handles loading state. */
+  onConfirm: (callback: () => void, setLoading: (loading: boolean) => void) => void | Promise<any>;
 
   /** Called when user cancels. Call callback() to close. */
   onCancel: (callback: () => void) => void;
@@ -76,8 +76,19 @@ export const PopConfirm = ({
     setIsLoading(false);
   }, []);
 
-  const handleConfirm = useCallback(() => {
-    onConfirm(close, setIsLoading);
+  const handleConfirm = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const result = onConfirm(close, setIsLoading);
+      if (result instanceof Promise) {
+        await result;
+        // Automatically close if the promise resolves successfully
+        close();
+      }
+    } catch (e) {
+      console.error(e);
+      setIsLoading(false);
+    }
   }, [onConfirm, close]);
 
   const handleCancel = useCallback(() => {

package/src/base-components/RecordCount.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@apptimate/core-lib';
+
+export interface RecordCountProps {
+    total: number;
+    label?: string;
+    className?: string;
+}
+
+export const RecordCount = ({ total, label = "records", className }: RecordCountProps) => {
+    return (
+        <div className={cn("flex flex-col justify-center items-center px-4 min-w-[60px] h-10 bg-gray-50 border border-gray-100 rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.02)]", className)}>
+            <span className="text-[14px] font-bold text-[#2D3142] leading-none">{total}</span>
+            <span className="text-[6px] font-bold text-gray-400 uppercase tracking-widest mt-1 leading-none">{label}</span>
+        </div>
+    );
+};

package/src/{SearchableSelect.tsx → base-components/SearchableSelect.tsx}

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import { cn } from '@apptimate/core-lib';
 import { ChevronDown, X, Search, Loader2 } from 'lucide-react';
+import { Label } from './Label';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -493,7 +494,7 @@ function SelectCore<T extends Record<string, unknown>>({
                         aria-label="Search options"
                     />
                     {isAsync && isSearching && (
-                        <Loader2 size={15} className="text-primary animate-spin shrink-0" />
+                        <Loader2 size={15} className="text-[#2D3142] animate-spin shrink-0" />
                     )}
                 </div>
             )}
@@ -544,7 +545,7 @@ function SelectCore<T extends Record<string, unknown>>({
                         {multiple && (
                             <span
                                 className={cn(
-                                    'w-4 h-4 rounded border-1.5 flex items-center justify-center shrink-0 transition-colors',
+                                    'w-4 h-4 rounded border-[1.5px] flex items-center justify-center shrink-0 transition-colors',
                                     isSelected(item)
                                         ? 'bg-primary border-primary'
                                         : 'border-border-subtle bg-surface-0'
@@ -570,7 +571,7 @@ function SelectCore<T extends Record<string, unknown>>({
                 {/* Async pagination loader */}
                 {isAsync && isOptionLoading && (
                     <li className="flex items-center justify-center py-3">
-                        <Loader2 size={18} className="text-primary animate-spin" />
+                        <Loader2 size={18} className="text-[#2D3142] animate-spin" />
                     </li>
                 )}
             </ul>
@@ -592,10 +593,9 @@ function SelectCore<T extends Record<string, unknown>>({
         <div className={cn('flex flex-col gap-1.5 w-full', className)}>
             {/* Label */}
             {label && (
-                <label className="text-[12px] font-semibold text-foreground-subtle tracking-[0.3px] uppercase">
+                <Label isRequired={isRequired}>
                     {label}
-                    {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
-                </label>
+                </Label>
             )}
 
             {/* Select container */}
@@ -615,10 +615,10 @@ function SelectCore<T extends Record<string, unknown>>({
                 <div
                     ref={controlRef}
                     className={cn(
-                        'w-full border-1.5 rounded-[10px] px-3.5 py-2.5 flex items-center gap-2 cursor-pointer transition-all min-h-[42px]',
+                        'w-full border-[1.5px] rounded-[10px] px-3.5 py-2.5 flex items-center gap-2 cursor-pointer transition-all min-h-[42px]',
                         isOpen
-                            ? `border-primary bg-surface-${surface === 0 ? 1 : 2}`
-                            : `border-border-subtle bg-surface-${surface}`,
+                            ? `border-gray-300 bg-surface-${surface === 0 ? 1 : 2}`
+                            : `border-border-subtle bg-surface-${surface} hover:border-gray-300`,
                         error && 'border-danger-alt focus:border-danger-alt'
                     )}
                 >

package/src/{Select.tsx → base-components/Select.tsx}

@@ -3,6 +3,7 @@
 import React from 'react';
 import { cn } from '@apptimate/core-lib';
 import { ChevronDown } from 'lucide-react';
+import { Label } from './Label';
 
 export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
     label?: string;
@@ -16,16 +17,16 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         return (
             <div className={cn("flex flex-col gap-1.5 w-full", className)}>
                 {label && (
-                    <label className="text-[12px] font-semibold text-foreground-subtle tracking-[0.3px] uppercase">
-                        {label} {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
-                    </label>
+                    <Label isRequired={isRequired}>
+                        {label}
+                    </Label>
                 )}
                 <div className="relative group">
                     <select
                         ref={ref}
                         className={cn(
-                            "w-full bg-surface-0 border-1.5 border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all focus:border-primary focus:bg-surface-1 appearance-none cursor-pointer",
-                            error && "border-danger-alt focus:border-danger-alt"
+                            "w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 appearance-none cursor-pointer",
+                            error && "border-danger-alt focus:border-danger-alt hover:border-danger-alt"
                         )}
                         {...props}
                     >
@@ -36,7 +37,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
                             </option>
                         ))}
                     </select>
-                    <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-disabled group-focus-within:text-primary transition-colors">
+                    <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-disabled group-focus-within:text-[#2D3142] transition-colors">
                         <ChevronDown size={16} />
                     </div>
                 </div>

package/src/base-components/Table.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@apptimate/core-lib';
+
+export interface TableProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export const Table = ({ children, className }: TableProps) => {
+    return (
+        <div className={cn("w-full", className)}>
+            <table className="w-full text-left lg:min-w-[600px] border-separate border-spacing-0 block lg:table">
+                {children}
+            </table>
+        </div>
+    );
+};
+
+export const THeader = ({ children, className }: TableProps) => (
+    <thead className={cn("hidden lg:table-header-group", className)}>
+        {children}
+    </thead>
+);
+
+export const TBody = ({ children, className }: TableProps) => (
+    <tbody className={cn("block lg:table-row-group", className)}>
+        {children}
+    </tbody>
+);
+
+export const TRow = ({ children, className, onClick }: TableProps & { onClick?: () => void }) => (
+    <tr
+        className={cn(
+            "group transition-colors duration-200 animate-fade-in",
+            "block lg:table-row",
+            "bg-white max-lg:shadow-sm max-lg:border max-lg:border-gray-100 max-lg:rounded-[10px] max-lg:overflow-hidden max-lg:mb-3", // Reduced mobile row gap
+            onClick && "cursor-pointer hover:bg-gray-50",
+            className
+        )}
+        onClick={onClick}
+    >
+        {children}
+    </tr>
+);
+
+export const TCell = ({ children, className, isHeader = false, colSpan, rowSpan, label }: TableProps & { isHeader?: boolean; colSpan?: number; rowSpan?: number; label?: string }) => {
+    const Tag = isHeader ? 'th' : 'td';
+    return (
+        <Tag
+            colSpan={colSpan}
+            rowSpan={rowSpan}
+            className={cn(
+                "transition-all",
+                "block lg:table-cell",
+                isHeader
+                    ? "py-2.5 px-3 lg:px-4 text-[12px] font-bold text-gray-400 capitalize tracking-wide bg-[#F8F9FA] first:rounded-l-[8px] last:rounded-r-[8px] border-b-0"
+                    : "py-1.5 px-3 lg:px-4 lg:py-2 text-[13px] font-bold text-[#2D3142]", // Highly compact row padding
+                !isHeader && "flex justify-between items-center lg:table-cell border-b border-gray-100 last:border-b-0 lg:last:border-b", // Adds separator line across rows on desktop
+                className
+            )}>
+            {label && <span className="lg:hidden text-[11px] font-bold text-gray-400 uppercase tracking-wider">{label}</span>}
+            <div className="flex justify-end lg:block w-full lg:w-auto">{children}</div>
+        </Tag>
+    );
+};
+
+export const TLoader = ({ rows = 8, cols = 4 }: { rows?: number; cols?: number }) => {
+    return (
+        <>
+            {Array.from({ length: rows }).map((_, i) => (
+                <TRow key={i}>
+                    {Array.from({ length: cols }).map((_, j) => (
+                        <TCell key={j}>
+                            <div className="h-4 bg-border-default animate-pulse rounded w-full" />
+                        </TCell>
+                    ))}
+                </TRow>
+            ))}
+        </>
+    );
+};

package/src/base-components/TableMobileOptions.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Search, Settings2 } from 'lucide-react';
+import { Dropdown, DropdownItem } from './Dropdown';
+import { Input } from './Input';
+
+export interface TableMobileOptionsProps {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    actionsLabel?: string;
+    children?: React.ReactNode;
+}
+
+export const TableMobileOptions = ({ 
+    searchValue, 
+    onSearchChange, 
+    searchPlaceholder = "Search...", 
+    searchLabel = "Search",
+    actionsLabel = "Actions",
+    children 
+}: TableMobileOptionsProps) => {
+    return (
+        <Dropdown
+            align="right"
+            contentClassName="w-[280px] p-2"
+            trigger={
+                <button className="flex items-center justify-center gap-2 px-3 py-2 rounded-[10px] bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors shadow-sm font-bold text-[13px]">
+                    <Settings2 size={16} /> Options
+                </button>
+            }
+        >
+            <div className="px-2 pb-2 pt-1 mb-1 border-b border-gray-100">
+                <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-2">{searchLabel}</p>
+                <Input
+                    placeholder={searchPlaceholder}
+                    icon={<Search size={16} className="text-gray-400" />}
+                    className="[&_input]:rounded-[8px] [&_input]:border [&_input]:border-gray-200 [&_input]:bg-white [&_input]:hover:border-gray-300 [&_input]:focus:border-gray-300 w-full"
+                    value={searchValue}
+                    onChange={(e) => onSearchChange(e.target.value)}
+                />
+            </div>
+            {children && (
+                <div className="px-2 pt-1 pb-1">
+                    <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-1">{actionsLabel}</p>
+                    {children}
+                </div>
+            )}
+        </Dropdown>
+    );
+};