@apptimate/ui 3.5.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
@@ -13,7 +13,8 @@
     "react": "^19.2.5",
     "react-apexcharts": "^2.1.1",
     "recharts": "^2.15.4",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "use-debounce": "^10.1.1"
   },
   "publishConfig": {
     "access": "public"

package/src/base-components/Input.tsx

@@ -10,10 +10,11 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     error?: string;
     icon?: React.ReactNode;
     isRequired?: boolean;
+    inputClassName?: string;
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ label, error, icon, isRequired, className, type, ...props }, ref) => {
+    ({ label, error, icon, isRequired, className, inputClassName, type, ...props }, ref) => {
         const [showPassword, setShowPassword] = useState(false);
         const isPassword = type === 'password';
         const inputType = isPassword ? (showPassword ? 'text' : 'password') : type;
@@ -25,7 +26,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                         {label}
                     </Label>
                 )}
-                <div className="relative group">
+                <div className="relative group flex-1 flex flex-col justify-center">
                     {icon && (
                         <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}
@@ -36,9 +37,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
                         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",
+                            "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
                             icon && "pl-10",
                             isPassword && "pr-10",
-                            error && "border-danger-alt focus:border-danger-alt hover:border-danger-alt"
+                            error && "border-danger-alt focus:border-danger-alt hover:border-danger-alt",
+                            inputClassName
                         )}
                         {...props}
                     />

package/src/base-components/TagsInput.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { cn } from '@apptimate/core-lib';
+import { X } from 'lucide-react';
+import React, { useState, KeyboardEvent, useRef } from 'react';
+import { Label } from './Label';
+
+export interface TagsInputProps {
+    label?: string;
+    error?: string;
+    isRequired?: boolean;
+    values: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+}
+
+export const TagsInput: React.FC<TagsInputProps> = ({
+    label,
+    error,
+    isRequired,
+    values,
+    onChange,
+    placeholder = "Type and press Enter...",
+    className,
+    disabled = false,
+}) => {
+    const [inputValue, setInputValue] = useState('');
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (disabled) return;
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            const newTag = inputValue.trim();
+            if (newTag && !values.includes(newTag)) {
+                onChange([...values, newTag]);
+            }
+            setInputValue('');
+        } else if (e.key === 'Backspace' && !inputValue && values.length > 0) {
+            e.preventDefault();
+            onChange(values.slice(0, -1));
+        }
+    };
+
+    const removeTag = (tagToRemove: string) => {
+        if (disabled) return;
+        onChange(values.filter(tag => tag !== tagToRemove));
+    };
+
+    return (
+        <div className={cn("flex flex-col gap-1.5 w-full", className)}>
+            {label && (
+                <Label isRequired={isRequired}>
+                    {label}
+                </Label>
+            )}
+            <div 
+                className={cn(
+                    "flex flex-wrap gap-2 w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-2 py-2 min-h-[42px] transition-all",
+                    !disabled && "cursor-text hover:border-gray-300 focus-within:border-gray-300 focus-within:bg-surface-1",
+                    disabled && "opacity-50 cursor-not-allowed bg-gray-50",
+                    error && !disabled && "border-danger-alt focus-within:border-danger-alt hover:border-danger-alt"
+                )}
+                onClick={() => !disabled && inputRef.current?.focus()}
+            >
+                {values.map((tag) => (
+                    <span 
+                        key={tag} 
+                        className="flex items-center gap-1.5 px-2.5 py-1 text-[12px] font-medium bg-[#F3F4F6] text-[#2D3142] rounded-md border border-[#E5E7EB]"
+                    >
+                        {tag}
+                        {!disabled && (
+                            <button 
+                                type="button" 
+                                onClick={(e) => { e.stopPropagation(); removeTag(tag); }}
+                                className="text-gray-400 hover:text-gray-700 transition-colors"
+                            >
+                                <X size={12} strokeWidth={3} />
+                            </button>
+                        )}
+                    </span>
+                ))}
+                <input
+                    ref={inputRef}
+                    type="text"
+                    disabled={disabled}
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={() => {
+                        const newTag = inputValue.trim();
+                        if (newTag && !values.includes(newTag)) {
+                            onChange([...values, newTag]);
+                        }
+                        setInputValue('');
+                    }}
+                    placeholder={values.length === 0 ? placeholder : ""}
+                    className={cn("flex-1 min-w-[100px] bg-transparent text-[13.5px] text-foreground-1 outline-none placeholder:text-foreground-disabled", disabled && "cursor-not-allowed")}
+                />
+            </div>
+            {error && <span className="text-[11px] text-danger-alt font-medium">{error}</span>}
+        </div>
+    );
+};

package/src/base-components/WizardModal.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import { Modal, ModalFooter } from "./Modal";
+import { Button } from "./Button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+export interface WizardStep {
+  key: string;
+  label: string;
+  num: number;
+}
+
+export interface WizardModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  steps: WizardStep[];
+  currentStep: number;
+  onStepChange: (step: number) => void;
+  canNext?: (step: number) => boolean;
+  onSubmit: () => void;
+  submitLabel?: string;
+  cancelLabel?: string;
+  nextLabel?: string;
+  backLabel?: string;
+  isSubmitting?: boolean;
+  children: ReactNode;
+}
+
+export const WizardModal = ({
+  isOpen,
+  onClose,
+  title,
+  size = "xl",
+  steps,
+  currentStep,
+  onStepChange,
+  canNext,
+  onSubmit,
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  nextLabel = "Next",
+  backLabel = "Back",
+  isSubmitting = false,
+  children,
+}: WizardModalProps) => {
+  const isNextDisabled = canNext ? !canNext(currentStep) : false;
+  const isLastStep = currentStep === steps.length - 1;
+
+  const handleNext = () => {
+    if (!isNextDisabled && !isLastStep) {
+      onStepChange(currentStep + 1);
+    }
+  };
+
+  const handleBack = () => {
+    if (currentStep > 0) {
+      onStepChange(currentStep - 1);
+    }
+  };
+
+  const handleStepClick = (index: number) => {
+    if (index < currentStep) {
+      onStepChange(index);
+    } else if (index === currentStep + 1 && !isNextDisabled) {
+      onStepChange(index);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} size={size}>
+      <div className="min-h-[400px] flex flex-col">
+        {/* Stepper Header */}
+        <div className="flex items-center gap-1 mb-6">
+          {steps.map((s, i) => (
+            <React.Fragment key={s.key}>
+              <button
+                type="button"
+                onClick={() => handleStepClick(i)}
+                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-[13px] font-semibold transition-all ${
+                  i === currentStep
+                    ? "bg-primary-500 text-white shadow-md shadow-primary-500/20"
+                    : i < currentStep
+                    ? "bg-primary-50 text-primary-600 hover:bg-primary-100"
+                    : "bg-gray-100 text-gray-400"
+                }`}
+              >
+                <span
+                  className={`w-5 h-5 rounded-full flex items-center justify-center text-[11px] font-bold ${
+                    i === currentStep
+                      ? "bg-white/20 text-white"
+                      : i < currentStep
+                      ? "bg-primary-200 text-primary-700"
+                      : "bg-gray-200 text-gray-400"
+                  }`}
+                >
+                  {s.num}
+                </span>
+                <span className="hidden sm:inline">{s.label}</span>
+              </button>
+              {i < steps.length - 1 && (
+                <div className={`flex-1 h-0.5 rounded-full mx-1 ${i < currentStep ? "bg-primary-300" : "bg-gray-200"}`} />
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 pb-2">
+          {children}
+        </div>
+
+        {/* Footer */}
+        <ModalFooter>
+          <div className="flex items-center justify-between w-full">
+            <div>
+              {currentStep > 0 && (
+                <Button
+                  variant="flat"
+                  color="default"
+                  onClick={handleBack}
+                  icon={<ChevronLeft size={15} />}
+                  iconPosition="left"
+                  isDisabled={isSubmitting}
+                >
+                  {backLabel}
+                </Button>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="flat"
+                color="default"
+                onClick={onClose}
+                isDisabled={isSubmitting}
+              >
+                {cancelLabel}
+              </Button>
+              {!isLastStep ? (
+                <Button
+                  color="primary"
+                  onClick={handleNext}
+                  isDisabled={isNextDisabled || isSubmitting}
+                  icon={<ChevronRight size={15} />}
+                  iconPosition="right"
+                >
+                  {nextLabel}
+                </Button>
+              ) : (
+                <Button color="primary" onClick={onSubmit} isLoading={isSubmitting}>
+                  {submitLabel}
+                </Button>
+              )}
+            </div>
+          </div>
+        </ModalFooter>
+      </div>
+    </Modal>
+  );
+};