@apptimate/ui 3.9.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "3.9.0",
+  "version": "4.0.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

package/src/base-components/Dropdown.tsx

@@ -112,15 +112,24 @@ export function Dropdown({ trigger, children, align = 'left', valign = 'bottom',
 
 interface DropdownItemProps {
     children: ReactNode;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     className?: string;
     isActive?: boolean;
+    icon?: ReactNode;
+    preventClose?: boolean;
 }
 
-export function DropdownItem({ children, onClick, className, isActive }: DropdownItemProps) {
+export function DropdownItem({ children, onClick, className, isActive, icon, preventClose }: DropdownItemProps) {
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (preventClose) {
+            e.stopPropagation();
+        }
+        onClick?.(e);
+    };
+
     return (
         <div
-            onClick={onClick}
+            onClick={handleClick}
             className={cn(
                 "px-3 py-2 text-[13px] rounded-[6px] cursor-pointer transition-colors flex items-center gap-2",
                 isActive
@@ -129,7 +138,9 @@ export function DropdownItem({ children, onClick, className, isActive }: Dropdow
                 className
             )}
         >
+            {icon && <span className="flex items-center justify-center text-current opacity-70 shrink-0">{icon}</span>}
             {children}
         </div>
     );
 }
+

package/src/base-components/EmptyState.tsx

@@ -5,14 +5,23 @@ import { Inbox } from 'lucide-react';
 
 export interface EmptyStateProps {
     message?: string;
+    title?: string;
+    description?: string;
     icon?: React.ReactNode;
 }
 
-export const EmptyState = ({ message = "No records found.", icon }: EmptyStateProps) => {
+export const EmptyState = ({ message = "No records found.", title, description, icon }: EmptyStateProps) => {
     return (
-        <div className="flex flex-col items-center justify-center opacity-40">
+        <div className="flex flex-col items-center justify-center opacity-40 text-center">
             {icon || <Inbox size={42} strokeWidth={1.5} className="mb-3 text-foreground-disabled" />}
-            <p className="text-[14px] font-medium text-foreground-disabled">{message}</p>
+            {title ? (
+                <>
+                    <h3 className="text-[16px] font-semibold text-foreground-disabled mb-1">{title}</h3>
+                    {description && <p className="text-[14px] font-medium text-foreground-disabled">{description}</p>}
+                </>
+            ) : (
+                <p className="text-[14px] font-medium text-foreground-disabled">{message}</p>
+            )}
         </div>
     );
 };

package/src/base-components/PopConfirm.tsx

@@ -16,7 +16,7 @@ export interface PopConfirmProps {
   onConfirm: (callback: () => void, setLoading: (loading: boolean) => void) => void | Promise<any>;
 
   /** Called when user cancels. Call callback() to close. */
-  onCancel: (callback: () => void) => void;
+  onCancel?: (callback: () => void) => void;
 
   /** Text for the confirm button (default: 'Confirm') */
   confirmText?: string;
@@ -92,7 +92,11 @@ export const PopConfirm = ({
   }, [onConfirm, close]);
 
   const handleCancel = useCallback(() => {
-    onCancel(close);
+    if (onCancel) {
+      onCancel(close);
+    } else {
+      close();
+    }
   }, [onCancel, close]);
 
   const handleTriggerClick = useCallback(

package/src/index.tsx

@@ -21,6 +21,7 @@ export * from './base-components/DesktopFilterPopover';
 export * from './base-components/Input';
 export * from './base-components/Textarea';
 export * from './base-components/Label';
+export * from './base-components/Textarea';
 export * from './base-components/Modal';
 export * from './base-components/ActionModal';
 export * from './base-components/Pagination';