@apptimate/ui 2.3.0 → 2.4.0

package/package.json

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

package/src/base-components/DateLabel.tsx

@@ -3,17 +3,21 @@ import React from 'react';
 export interface DateLabelProps {
   date: string | Date;
   className?: string;
+  isDateOnly?: boolean;
 }
 
-export function DateLabel({ date, className = '' }: DateLabelProps) {
+export function DateLabel({ date, className = '', isDateOnly: forceDateOnly = false }: DateLabelProps) {
   if (!date) return <span className="text-gray-300">-</span>;
 
-  let isDateOnly = false;
+  let isDateOnly = forceDateOnly;
   let parsedDate: string | Date = date;
 
   if (typeof date === 'string') {
     if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
       isDateOnly = true;
+    } else if (date.includes('T00:00:00.000000Z') || date.includes('T00:00:00.000Z')) {
+      isDateOnly = true;
+      date = date.split('T')[0];
     } else if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date)) {
       parsedDate = date.replace(' ', 'T') + 'Z';
     }

package/src/base-components/Dropdown.tsx

@@ -6,14 +6,15 @@ import { cn } from '@apptimate/core-lib';
 
 interface DropdownProps {
     trigger: ReactNode;
-    children: ReactNode;
+    children: ReactNode | ((close: () => void) => ReactNode);
     align?: 'left' | 'right';
     valign?: 'top' | 'bottom';
     className?: string;
     contentClassName?: string;
+    closeOnContentClick?: boolean;
 }
 
-export function Dropdown({ trigger, children, align = 'left', valign = 'bottom', className, contentClassName }: DropdownProps) {
+export function Dropdown({ trigger, children, align = 'left', valign = 'bottom', className, contentClassName, closeOnContentClick = true }: DropdownProps) {
     const [isOpen, setIsOpen] = useState(false);
     const [coords, setCoords] = useState({ top: 0, bottom: 0, left: 0, right: 0 });
     const dropdownRef = useRef<HTMLDivElement>(null);
@@ -99,9 +100,9 @@ export function Dropdown({ trigger, children, align = 'left', valign = 'bottom',
                         valign === 'bottom' ? "mt-1.5" : "mb-1.5",
                         contentClassName
                     )}
-                    onClick={closeDropdown}
+                    onClick={closeOnContentClick ? closeDropdown : undefined}
                 >
-                    {children}
+                    {typeof children === 'function' ? children(closeDropdown) : children}
                 </div>,
                 document.body
             )}

package/src/base-components/Input.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import React, { useState } from 'react';
 import { cn } from '@apptimate/core-lib';
 import { Eye, EyeOff } from 'lucide-react';
+import React, { useState } from 'react';
 import { Label } from './Label';
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -35,7 +35,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                         ref={ref}
                         type={inputType}
                         className={cn(
-                             "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",
+                            "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 hover:border-danger-alt"

package/src/base-components/Select.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import React from 'react';
 import { cn } from '@apptimate/core-lib';
 import { ChevronDown } from 'lucide-react';
+import React from 'react';
 import { Label } from './Label';
 
 export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {

package/src/base-components/TableMobileOptions.tsx

@@ -9,7 +9,7 @@ export interface TableMobileOptionsProps {
     searchPlaceholder?: string;
     searchLabel?: string;
     actionsLabel?: string;
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((close: () => void) => React.ReactNode);
 }
 
 export const TableMobileOptions = ({ 
@@ -24,27 +24,32 @@ export const TableMobileOptions = ({
         <Dropdown
             align="right"
             contentClassName="w-[280px] p-2"
+            closeOnContentClick={false}
             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>
+            {(close) => (
+                <>
+                    <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>
+                            {typeof children === 'function' ? children(close) : children}
+                        </div>
+                    )}
+                </>
             )}
         </Dropdown>
     );

package/src/common-components/PaymentSection.tsx

@@ -198,7 +198,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
           .map((mode) => {
             const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
             return (
-              <button key={mode.id} onClick={() => selectSingleMode(mode)}
+              <button key={mode.id} type="button" onClick={() => selectSingleMode(mode)}
                 className={cn(
                   "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
                   isActive
@@ -211,7 +211,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
             );
           })}
         {/* Split Button */}
-        <button onClick={activateSplitMode}
+        <button type="button" onClick={activateSplitMode}
           className={cn(
             "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
             selectionMode === "split"
@@ -248,7 +248,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
                 return canBeMultiple || !payments.some(p => p.mode_id === m.id);
               })
               .map((mode) => (
-                <button key={mode.id} onClick={() => addPayment(mode)}
+                <button key={mode.id} type="button" onClick={() => addPayment(mode)}
                   className="inline-flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold rounded-[8px] bg-surface-0 border border-border-subtle text-foreground-subtle hover:border-primary/40 hover:text-primary transition-all">
                   {getModeIcon(mode.code, 12)}
                   + {mode.name}
@@ -334,7 +334,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
           {entry.mode_name}
         </div>
         {showRemove && (
-          <button onClick={onRemove}
+          <button type="button" onClick={onRemove}
             className="w-7 h-7 rounded-[6px] flex items-center justify-center text-foreground-disabled hover:text-danger-alt hover:bg-danger-alt/10 transition-all">
             <Trash2 size={13} />
           </button>