@apptimate/ui 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,7 +1,7 @@
-# @apptimate/ui
-
-## 1.0.0
-
-### Major Changes
-
-- init
+# @apptimate/ui
+
+## 1.0.0
+
+### Major Changes
+
+- init

package/package.json

@@ -1,18 +1,21 @@
-{
-  "name": "@apptimate/ui",
-  "version": "1.0.0",
-  "main": "src/index.tsx",
-  "types": "src/index.tsx",
-  "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.38.0",
-    "lucide-react": "^1.14.0",
-    "react": "latest",
-    "tailwind-merge": "^3.5.0",
-    "@apptimate/core-lib": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@apptimate/ui",
+  "version": "1.1.0",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.5",
+    "tailwind-merge": "^3.5.0",
+    "@apptimate/core-lib": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "next": "^16.0.0"
+  }
+}

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

@@ -14,7 +14,7 @@ export interface ButtonProps {
   children?: React.ReactNode;
 
   /** The visual style variant of the button */
-  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'shadow' | 'ghost';
+  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'shadow' | 'ghost' | 'soft';
 
   /** The color scheme of the button */
   color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
@@ -73,7 +73,7 @@ const iconSizeMap = {
 
 export const buttonVariants = cva(
   [
-    'inline-flex items-center justify-center gap-2 font-[inherit] font-medium cursor-pointer transition-all duration-200 relative whitespace-nowrap select-none outline-none overflow-hidden',
+    'inline-flex items-center justify-center gap-2 font-[inherit] font-medium cursor-pointer transition-all duration-200 relative whitespace-nowrap select-none outline-none overflow-hidden shrink-0 shadow-[0_1px_2px_rgba(0,0,0,0.02)]',
     'focus-visible:outline-2 focus-visible:outline-[var(--aceui-color-focus)] focus-visible:outline-offset-2',
   ],
   {
@@ -85,6 +85,7 @@ export const buttonVariants = cva(
         flat: '',
         shadow: '',
         ghost: '',
+        soft: '',
       },
       color: {
         default: '',
@@ -95,14 +96,14 @@ export const buttonVariants = cva(
         danger: '',
       },
       size: {
-        small: 'text-[0.75rem] leading-[1rem] px-3 min-h-8',
-        medium: 'text-[0.875rem] leading-[1.25rem] px-4 min-h-10',
-        large: 'text-[1rem] leading-[1.5rem] px-6 min-h-12',
+        small: 'text-[0.75rem] leading-[1rem] px-3 h-8',
+        medium: 'text-[0.8125rem] leading-[1.25rem] px-4 h-10',
+        large: 'text-[1rem] leading-[1.5rem] px-6 h-12',
       },
       radius: {
         none: 'rounded-none',
         small: 'rounded-[8px]',
-        medium: 'rounded-[12px]',
+        medium: 'rounded-[10px]',
         large: 'rounded-[14px]',
         full: 'rounded-full',
         squircle: 'rounded-full',
@@ -129,12 +130,12 @@ export const buttonVariants = cva(
       { variant: 'solid', color: 'warning', class: 'border-none bg-warning-500 text-warning-foreground hover:bg-warning-600 active:bg-warning-700' },
       { variant: 'solid', color: 'danger', class: 'border-none bg-danger-500 text-danger-foreground hover:bg-danger-600 active:bg-danger-700' },
       /* Bordered */
-      { variant: 'bordered', color: 'default', class: 'bg-transparent text-default-500 border-1 border-default-500 hover:bg-default-50' },
-      { variant: 'bordered', color: 'primary', class: 'bg-transparent text-primary-500 border-1 border-primary-500 hover:bg-primary-50' },
-      { variant: 'bordered', color: 'secondary', class: 'bg-transparent text-secondary-500 border-1 border-secondary-500 hover:bg-secondary-50' },
-      { variant: 'bordered', color: 'success', class: 'bg-transparent text-success-500 border-1 border-success-500 hover:bg-success-50' },
-      { variant: 'bordered', color: 'warning', class: 'bg-transparent text-warning-500 border-1 border-warning-500 hover:bg-warning-50' },
-      { variant: 'bordered', color: 'danger', class: 'bg-transparent text-danger-500 border-1 border-danger-500 hover:bg-danger-50' },
+      { variant: 'bordered', color: 'default', class: 'bg-transparent text-default-500 border border-default-500 hover:bg-default-50' },
+      { variant: 'bordered', color: 'primary', class: 'bg-transparent text-primary-500 border border-primary-500 hover:bg-primary-50' },
+      { variant: 'bordered', color: 'secondary', class: 'bg-transparent text-secondary-500 border border-secondary-500 hover:bg-secondary-50' },
+      { variant: 'bordered', color: 'success', class: 'bg-transparent text-success-500 border border-success-500 hover:bg-success-50' },
+      { variant: 'bordered', color: 'warning', class: 'bg-transparent text-warning-500 border border-warning-500 hover:bg-warning-50' },
+      { variant: 'bordered', color: 'danger', class: 'bg-transparent text-danger-500 border border-danger-500 hover:bg-danger-50' },
       /* Light */
       { variant: 'light', color: 'default', class: 'bg-default-50 text-default-500 border-none hover:bg-default-100' },
       { variant: 'light', color: 'primary', class: 'bg-primary-50 text-primary-500 border-none hover:bg-primary-100' },
@@ -149,6 +150,13 @@ export const buttonVariants = cva(
       { variant: 'flat', color: 'success', class: 'bg-transparent text-success-500 border-none hover:bg-success-50' },
       { variant: 'flat', color: 'warning', class: 'bg-transparent text-warning-500 border-none hover:bg-warning-50' },
       { variant: 'flat', color: 'danger', class: 'bg-transparent text-danger-500 border-none hover:bg-danger-50' },
+      /* Soft */
+      { variant: 'soft', color: 'default', class: 'bg-gray-50 text-gray-700 border border-gray-100 hover:bg-gray-100 hover:border-gray-200' },
+      { variant: 'soft', color: 'primary', class: 'bg-primary-50 text-primary-700 border border-primary-200 hover:bg-primary-100 hover:border-primary-300' },
+      { variant: 'soft', color: 'secondary', class: 'bg-secondary-50 text-secondary-700 border border-secondary-200 hover:bg-secondary-100 hover:border-secondary-300' },
+      { variant: 'soft', color: 'success', class: 'bg-success-50 text-success-700 border border-success-200 hover:bg-success-100 hover:border-success-300' },
+      { variant: 'soft', color: 'warning', class: 'bg-warning-50 text-warning-700 border border-warning-200 hover:bg-warning-100 hover:border-warning-300' },
+      { variant: 'soft', color: 'danger', class: 'bg-danger-50 text-danger-700 border border-danger-200 hover:bg-danger-100 hover:border-danger-300' },
       /* Shadow */
       { variant: 'shadow', color: 'default', class: 'border-none bg-default-500 text-default-foreground hover:bg-default-600 active:bg-default-700' },
       { variant: 'shadow', color: 'primary', class: 'border-none bg-primary-500 text-primary-foreground hover:bg-primary-600 active:bg-primary-700' },
@@ -197,7 +205,7 @@ export const Button = ({
   variant = 'solid',
   color = 'primary',
   size = 'medium',
-  radius = 'squircle',
+  radius = 'full',
   isDisabled = false,
   isLoading = false,
   icon,

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

@@ -136,7 +136,7 @@ export const ChipInput = ({
             <div
                 className={cn(
                     'flex flex-wrap items-center gap-1.5 px-3 py-2 rounded-[10px] border bg-surface-0 transition-colors min-h-[42px] cursor-text',
-                    error ? 'border-danger-500' : 'border-border-default focus-within:border-primary-500',
+                    error ? 'border-danger-500 hover:border-danger-500' : 'border-border-default hover:border-gray-300 focus-within:border-gray-300',
                     disabled && 'opacity-50 pointer-events-none'
                 )}
                 onClick={() => inputRef.current?.focus()}

package/src/base-components/DesktopFilterPopover.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { SlidersHorizontal } from 'lucide-react';
+import { Dropdown } from './Dropdown';
+import { Button } from './Button';
+import { cn } from '@apptimate/core-lib';
+
+export interface DesktopFilterPopoverProps {
+    /** Content to render inside the filter popover (typically Select components) */
+    children: React.ReactNode;
+    /** Custom label for the trigger button aria-label */
+    label?: string;
+    /** Additional class for outer wrapper */
+    className?: string;
+    /** Additional class for the trigger button */
+    triggerClassName?: string;
+    /** Whether any filter is active — shows a visual indicator dot */
+    hasActiveFilter?: boolean;
+}
+
+export const DesktopFilterPopover = ({
+    children,
+    label = "Filters",
+    className,
+    triggerClassName,
+    hasActiveFilter = false,
+}: DesktopFilterPopoverProps) => {
+    return (
+        <div className={cn("hidden lg:block relative", className)}>
+            <Dropdown
+                align="right"
+                contentClassName="w-[260px] p-3 space-y-3"
+                trigger={
+                    <div className="relative">
+                        <Button
+                            variant="soft"
+                            color="default"
+                            className={cn("!p-0 text-gray-500", triggerClassName)}
+                            icon={<SlidersHorizontal size={18} strokeWidth={2} />}
+                            ariaLabel={label}
+                        />
+                        {hasActiveFilter && (
+                            <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-primary-500 rounded-full ring-2 ring-white" />
+                        )}
+                    </div>
+                }
+            >
+                <div onClick={(e) => e.stopPropagation()} className="space-y-3">
+                    {children}
+                </div>
+            </Dropdown>
+        </div>
+    );
+};

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/{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}

@@ -14,9 +14,10 @@ export interface ModalProps {
     footer?: React.ReactNode;
     backdrop?: 'transparent' | 'opaque' | 'blur';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    position?: 'center' | 'bottom';
 }
 
-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' }: ModalProps) => {
     useEffect(() => {
         if (isOpen) {
             document.body.style.overflow = 'hidden';
@@ -46,7 +47,11 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
     return (
         <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 z-50 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' : ''
+                )}>
                     <motion.div
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
@@ -55,12 +60,13 @@ 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
                         )}
@@ -86,7 +92,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 sm:pb-7 flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
                                 {footer}
                             </div>
                         )}
@@ -96,3 +102,11 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
         </AnimatePresence>
     );
 };
+
+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/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>
+            ))}
+        </>
+    );
+};