@apptimate/ui 1.3.0 → 1.5.0

package/package.json

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

package/src/base-components/ActionModal.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import React from 'react';
+import { Modal } from './Modal';
+
+export interface ActionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string | React.ReactNode;
+    children: React.ReactNode;
+    onConfirm?: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    isLoading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /** Variant controls the confirm button colour */
+    variant?: 'primary' | 'danger';
+    className?: string;
+    /** Override z-index layer (default 50). Increase for nested modals. */
+    zIndex?: number;
+}
+
+/**
+ * ActionModal — a convenience wrapper around `Modal` that renders a
+ * standard Cancel / Confirm footer.  Use this for quick confirm-style
+ * dialogs (deposits, withdrawals, delete confirmations, etc.).
+ */
+export const ActionModal = ({
+    isOpen,
+    onClose,
+    title,
+    children,
+    onConfirm,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    isLoading = false,
+    size = 'sm',
+    variant = 'primary',
+    className,
+    zIndex,
+}: ActionModalProps) => {
+    const confirmBtnClass =
+        variant === 'danger'
+            ? "px-4 py-2 rounded-lg text-sm font-bold bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 transition-colors"
+            : "px-4 py-2 rounded-lg text-sm font-bold bg-[#2D3142] text-white hover:bg-[#3d4156] disabled:opacity-50 transition-colors";
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title={title}
+            size={size}
+            className={className}
+            zIndex={zIndex}
+            footer={
+                <>
+                    <button
+                        onClick={onClose}
+                        className="px-4 py-2 rounded-lg text-sm font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 transition-colors"
+                        disabled={isLoading}
+                    >
+                        {cancelLabel}
+                    </button>
+                    {onConfirm && (
+                        <button
+                            onClick={onConfirm}
+                            className={confirmBtnClass}
+                            disabled={isLoading}
+                        >
+                            {isLoading ? (
+                                <span className="inline-flex items-center gap-2">
+                                    <span className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                    {confirmLabel}
+                                </span>
+                            ) : (
+                                confirmLabel
+                            )}
+                        </button>
+                    )}
+                </>
+            }
+        >
+            {children}
+        </Modal>
+    );
+};

package/src/base-components/AmountComponent.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@apptimate/core-lib';
+import { Label } from './Label';
+
+// ── Types ────────────────────────────────────────────────────────────────
+
+export type AmountDisplayMode = 'label' | 'input';
+
+export interface AmountComponentProps {
+  /** The numeric amount value */
+  value: number | string;
+  /** Display mode: 'label' (read-only text) or 'input' (editable field). Default: 'label' */
+  mode?: AmountDisplayMode;
+  /** Currency symbol. Default: 'Rs.' */
+  currency?: string;
+  /** Text color class (e.g. 'text-green-600', 'text-red-500'). Applied to the rendered amount. */
+  color?: string;
+  /** Label text shown above the amount (only when mode='label'). */
+  label?: string;
+  /** If true, shows the required asterisk on the label */
+  isRequired?: boolean;
+  /** Font size class override. Default: 'text-sm' for label, 'text-[13.5px]' for input */
+  fontSize?: string;
+  /** Font weight class override. Default: 'font-semibold' */
+  fontWeight?: string;
+  /** Additional className for the root wrapper */
+  className?: string;
+  /** Number of decimal places. Default: 2 */
+  decimals?: number;
+
+  // ── Input mode props ──────────────────────────────────────────────────
+  /** Callback when value changes (input mode only) */
+  onChange?: (value: number) => void;
+  /** Placeholder text (input mode only). Default: '0.00' */
+  placeholder?: string;
+  /** Disable the input (input mode only) */
+  disabled?: boolean;
+  /** Error message (input mode only) */
+  error?: string;
+  /** Min value (input mode only) */
+  min?: number;
+  /** Max value (input mode only) */
+  max?: number;
+  /** Step value (input mode only). Default: '0.01' */
+  step?: string;
+  /** Name attribute (input mode only) */
+  name?: string;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+
+function formatAmount(value: number | string, decimals: number): string {
+  const num = typeof value === 'string' ? parseFloat(value) : value;
+  if (isNaN(num)) return '0.' + '0'.repeat(decimals);
+  return num.toLocaleString('en-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+}
+
+// ── Component ────────────────────────────────────────────────────────────
+
+export const AmountComponent = React.forwardRef<HTMLInputElement, AmountComponentProps>(
+  (
+    {
+      value,
+      mode = 'label',
+      currency = 'Rs.',
+      color,
+      label,
+      isRequired,
+      fontSize,
+      fontWeight = 'font-semibold',
+      className,
+      decimals = 2,
+      // Input mode props
+      onChange,
+      placeholder = '0.00',
+      disabled = false,
+      error,
+      min,
+      max,
+      step = '0.01',
+      name,
+    },
+    ref
+  ) => {
+    // ── Label Mode ────────────────────────────────────────────────────────
+    if (mode === 'label') {
+      const resolvedFontSize = fontSize || 'text-sm';
+      const resolvedColor = color || 'text-foreground-1';
+
+      return (
+        <div className={cn('flex flex-col gap-1', className)}>
+          {label && (
+            <Label isRequired={isRequired}>{label}</Label>
+          )}
+          <span className={cn(resolvedFontSize, fontWeight, resolvedColor)}>
+            {currency} {formatAmount(value, decimals)}
+          </span>
+        </div>
+      );
+    }
+
+    // ── Input Mode ────────────────────────────────────────────────────────
+    const resolvedFontSize = fontSize || 'text-[13.5px]';
+    const resolvedColor = color || 'text-foreground-1';
+
+    return (
+      <div className={cn('flex flex-col gap-1.5 w-full', className)}>
+        {label && (
+          <Label isRequired={isRequired}>{label}</Label>
+        )}
+        <div className="relative group">
+          {/* Currency prefix */}
+          <span
+            className={cn(
+              'absolute left-3 top-1/2 -translate-y-1/2 text-[12px] font-medium text-gray-400 pointer-events-none select-none'
+            )}
+          >
+            {currency}
+          </span>
+          <input
+            ref={ref}
+            type="number"
+            name={name}
+            value={value}
+            onChange={(e) => onChange?.(parseFloat(e.target.value) || 0)}
+            disabled={disabled}
+            min={min}
+            max={max}
+            step={step}
+            placeholder={placeholder}
+            className={cn(
+              'w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] pl-10 pr-3.5 py-2.5 text-right outline-none transition-all',
+              'hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1',
+              'placeholder:text-foreground-disabled',
+              '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+              resolvedFontSize,
+              fontWeight,
+              resolvedColor,
+              disabled && 'opacity-60 cursor-not-allowed',
+              error && 'border-danger-alt focus:border-danger-alt hover:border-danger-alt'
+            )}
+          />
+        </div>
+        {error && (
+          <span className="text-[11px] text-danger-alt font-medium">{error}</span>
+        )}
+      </div>
+    );
+  }
+);
+
+AmountComponent.displayName = 'AmountComponent';

package/src/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 export * from './base-components/Accordion';
+export * from './base-components/AmountComponent';
 export * from './base-components/Badge';
 export * from './base-components/Button';
 export * from './base-components/ButtonGroup';
@@ -20,6 +21,7 @@ export * from './base-components/DesktopFilterPopover';
 export * from './base-components/Input';
 export * from './base-components/Label';
 export * from './base-components/Modal';
+export * from './base-components/ActionModal';
 export * from './base-components/Pagination';
 export * from './base-components/PopConfirm';
 export * from './base-components/SearchableSelect';