@teja-app/ui 0.0.4 → 0.0.5

package/dist/index.js

@@ -5,7 +5,7 @@ import * as React from "react";
 import React__default, { forwardRef, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, useContext, createContext, Fragment as Fragment$1, isValidElement, cloneElement, createElement, useId as useId$1, useSyncExternalStore, useReducer, createRef } from "react";
 import * as ReactDOM from "react-dom";
 import { flushSync, createPortal } from "react-dom";
-const variantStyles$4 = {
+const variantStyles$5 = {
   primary: [
     // Light mode
     "bg-primary-800 text-white border border-gold-500/40",
@@ -45,7 +45,7 @@ const variantStyles$4 = {
     "dark:focus:ring-error/30"
   ].join(" ")
 };
-const sizeStyles$b = {
+const sizeStyles$d = {
   sm: "px-3 py-1.5 text-sm h-8",
   md: "px-4 py-2 text-base h-10",
   lg: "px-6 py-3 text-lg h-12"
@@ -75,9 +75,9 @@ const Button = forwardRef(
           "dark:focus:ring-offset-primary-900",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           // Variant styles
-          variantStyles$4[variant],
+          variantStyles$5[variant],
           // Size styles
-          sizeStyles$b[size2],
+          sizeStyles$d[size2],
           // Width styles
           fullWidth && "w-full",
           // Custom className (allows override)
@@ -128,7 +128,7 @@ const Button = forwardRef(
   }
 );
 Button.displayName = "Button";
-const sizeStyles$a = {
+const sizeStyles$c = {
   xs: "h-3 w-3",
   // 12px
   sm: "h-4 w-4",
@@ -158,7 +158,7 @@ const Spinner = forwardRef(
         ref,
         className: cn(
           "animate-spin",
-          sizeStyles$a[size2],
+          sizeStyles$c[size2],
           colorStyles[color],
           className
         ),
@@ -7379,7 +7379,7 @@ const CloseIcon$2 = () => /* @__PURE__ */ jsx(
     )
   }
 );
-const sizeStyles$9 = {
+const sizeStyles$b = {
   sm: "max-w-[400px]",
   md: "max-w-[560px]",
   lg: "max-w-[720px]"
@@ -7432,7 +7432,7 @@ function Modal({
               "bg-white border border-primary-200",
               // Dark mode
               "dark:bg-primary-800 dark:border-primary-700",
-              sizeStyles$9[size2],
+              sizeStyles$b[size2],
               className
             ),
             children: [
@@ -7510,7 +7510,7 @@ const CloseIcon$1 = () => /* @__PURE__ */ jsx(
     )
   }
 );
-const sizeStyles$8 = {
+const sizeStyles$a = {
   sm: "max-w-[400px]",
   md: "max-w-[560px]",
   lg: "max-w-[720px]"
@@ -7559,7 +7559,7 @@ function Drawer({
               "bg-white border-l border-primary-200",
               // Dark mode
               "dark:bg-primary-800 dark:border-primary-700",
-              sizeStyles$8[size2],
+              sizeStyles$a[size2],
               className
             ),
             children: [
@@ -7675,7 +7675,7 @@ const paddingStyles = {
   md: "p-6",
   lg: "p-8"
 };
-const variantStyles$3 = {
+const variantStyles$4 = {
   default: [
     "shadow-sm border border-primary-200",
     "dark:border-primary-700"
@@ -7716,7 +7716,7 @@ const Card = forwardRef(
           // Padding
           paddingStyles[padding],
           // Variant
-          variantStyles$3[variant],
+          variantStyles$4[variant],
           // Hover effect
           hoverable && [
             "cursor-pointer",
@@ -7732,7 +7732,7 @@ const Card = forwardRef(
   }
 );
 Card.displayName = "Card";
-const sizeStyles$7 = {
+const sizeStyles$9 = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
@@ -7802,7 +7802,7 @@ const Checkbox = forwardRef(
                 "aria-describedby": errorId,
                 onChange: handleChange,
                 className: cn(
-                  sizeStyles$7[size2],
+                  sizeStyles$9[size2],
                   "rounded border transition-colors",
                   "focus:ring-2 focus:ring-offset-0",
                   "disabled:cursor-not-allowed",
@@ -7856,7 +7856,7 @@ const Checkbox = forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-const sizeStyles$6 = {
+const sizeStyles$8 = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
@@ -7895,7 +7895,7 @@ const Radio = forwardRef(
               id: radioId,
               disabled,
               className: cn(
-                sizeStyles$6[size2],
+                sizeStyles$8[size2],
                 "border transition-colors",
                 "focus:ring-2 focus:ring-offset-0",
                 "disabled:cursor-not-allowed",
@@ -8002,7 +8002,7 @@ function RadioGroup({
   ] });
 }
 RadioGroup.displayName = "RadioGroup";
-const sizeStyles$5 = {
+const sizeStyles$7 = {
   sm: {
     switch: "h-5 w-9",
     dot: "h-3 w-3",
@@ -8029,7 +8029,7 @@ function Toggle({
   className,
   isLoading = false
 }) {
-  const currentSize = sizeStyles$5[size2];
+  const currentSize = sizeStyles$7[size2];
   const isDisabled = disabled || isLoading;
   return /* @__PURE__ */ jsx(W, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
     (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex-1 mr-4", children: [
@@ -8266,7 +8266,7 @@ function Combobox({
   ] });
 }
 Combobox.displayName = "Combobox";
-const variantStyles$2 = {
+const variantStyles$3 = {
   default: cn(
     "bg-primary-100 text-primary-700 border-primary-200",
     "dark:bg-primary-800 dark:text-primary-200 dark:border-primary-700"
@@ -8292,7 +8292,7 @@ const variantStyles$2 = {
     "dark:bg-gold-900/50 dark:text-gold-300 dark:border-gold-700"
   )
 };
-const sizeStyles$4 = {
+const sizeStyles$6 = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
@@ -8305,8 +8305,8 @@ const Badge = forwardRef(
         ref,
         className: cn(
           "inline-flex items-center justify-center font-medium rounded-full border",
-          variantStyles$2[variant],
-          sizeStyles$4[size2],
+          variantStyles$3[variant],
+          sizeStyles$6[size2],
           className
         ),
         ...props,
@@ -8464,7 +8464,7 @@ const TableCell = forwardRef(
   }
 );
 TableCell.displayName = "TableCell";
-const sizeStyles$3 = {
+const sizeStyles$5 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-5 py-2.5 text-base"
@@ -8513,7 +8513,7 @@ function Tabs({
               className: ({ selected }) => cn(
                 "relative outline-none transition-colors duration-normal",
                 "focus-visible:ring-2 focus-visible:ring-gold-500/50",
-                sizeStyles$3[size2],
+                sizeStyles$5[size2],
                 fullWidth && "flex-1",
                 // Default variant styles
                 variant === "default" && [
@@ -8697,7 +8697,7 @@ const Breadcrumbs = forwardRef(
   }
 );
 Breadcrumbs.displayName = "Breadcrumbs";
-const variantStyles$1 = {
+const variantStyles$2 = {
   text: "rounded",
   circular: "rounded-full",
   rectangular: "rounded-md"
@@ -8733,7 +8733,7 @@ const Skeleton = forwardRef(
               {
                 className: cn(
                   "bg-primary-200 dark:bg-primary-700",
-                  variantStyles$1[variant],
+                  variantStyles$2[variant],
                   animate && "animate-pulse"
                 ),
                 style: {
@@ -8755,7 +8755,7 @@ const Skeleton = forwardRef(
         ref,
         className: cn(
           "bg-primary-200 dark:bg-primary-700",
-          variantStyles$1[variant],
+          variantStyles$2[variant],
           animate && "animate-pulse",
           className
         ),
@@ -8774,7 +8774,7 @@ const Skeleton = forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
-const defaultIcons = {
+const defaultIcons$1 = {
   "no-data": /* @__PURE__ */ jsx(
     "svg",
     {
@@ -8833,7 +8833,7 @@ const defaultIcons = {
     }
   )
 };
-const sizeStyles$2 = {
+const sizeStyles$4 = {
   sm: {
     container: "py-6 px-4",
     icon: "w-10 h-10",
@@ -8869,7 +8869,7 @@ const EmptyState = forwardRef(
     className,
     ...props
   }, ref) => {
-    const styles = sizeStyles$2[size2];
+    const styles = sizeStyles$4[size2];
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8881,7 +8881,7 @@ const EmptyState = forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { className: cn(styles.icon, typeColors[type], "mb-4"), children: icon || defaultIcons[type] }),
+          /* @__PURE__ */ jsx("div", { className: cn(styles.icon, typeColors[type], "mb-4"), children: icon || defaultIcons$1[type] }),
           /* @__PURE__ */ jsx(
             "h3",
             {
@@ -8913,7 +8913,7 @@ const EmptyState = forwardRef(
 EmptyState.displayName = "EmptyState";
 const ChevronLeftIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) });
 const ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) });
-const sizeStyles$1 = {
+const sizeStyles$3 = {
   sm: { button: "h-8 min-w-8 px-2 text-sm", text: "text-sm" },
   md: { button: "h-10 min-w-10 px-3 text-sm", text: "text-sm" }
 };
@@ -8963,7 +8963,7 @@ function Pagination({
   className
 }) {
   const pageSizeId = useId$1();
-  const currentSize = sizeStyles$1[size2];
+  const currentSize = sizeStyles$3[size2];
   const canGoPrevious = currentPage > 1;
   const canGoNext = currentPage < totalPages;
   const pageNumbers = useMemo(
@@ -9510,7 +9510,7 @@ function isItemActive(currentPath, href, matcher = "exact") {
       return false;
   }
 }
-const sizeStyles = {
+const sizeStyles$2 = {
   sm: "px-2 py-1.5 text-xs gap-2",
   md: "px-3 py-2.5 text-sm gap-3",
   lg: "px-4 py-3 text-base gap-3"
@@ -9601,7 +9601,7 @@ function SidebarItem({
           "focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2",
           "dark:focus:ring-offset-primary-900",
           // Size styles
-          sizeStyles[size2],
+          sizeStyles$2[size2],
           // State styles
           item.disabled && "opacity-50 cursor-not-allowed",
           !item.disabled && !isActive && [
@@ -9633,7 +9633,7 @@ function SidebarItem({
         "focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2",
         "dark:focus:ring-offset-primary-900",
         // Size styles
-        sizeStyles[size2],
+        sizeStyles$2[size2],
         // State styles
         item.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
         !item.disabled && !isActive && [
@@ -9734,7 +9734,7 @@ const SidebarDivider = forwardRef(
   }
 );
 SidebarDivider.displayName = "SidebarDivider";
-const variantStyles = {
+const variantStyles$1 = {
   default: [
     "bg-white border-r border-gold-500/40",
     "dark:bg-primary-900 dark:border-gold-500/20"
@@ -9917,7 +9917,7 @@ const Sidebar = forwardRef(
             // Mobile styles
             isOpen ? "translate-x-0" : "-translate-x-full",
             // Variant styles
-            variantStyles[variant],
+            variantStyles$1[variant],
             className
           ),
           style: { width: sidebarWidth },
@@ -9930,7 +9930,508 @@ const Sidebar = forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
+const CheckCircleIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+const XCircleIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+const ExclamationCircleIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) });
+const InformationCircleIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" }) });
+const XMarkIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) });
+const defaultIcons = {
+  success: /* @__PURE__ */ jsx(CheckCircleIcon, {}),
+  error: /* @__PURE__ */ jsx(XCircleIcon, {}),
+  warning: /* @__PURE__ */ jsx(ExclamationCircleIcon, {}),
+  info: /* @__PURE__ */ jsx(InformationCircleIcon, {})
+};
+const variantStyles = {
+  success: {
+    container: cn(
+      "bg-success-light border-success/20 text-[#166534]",
+      "dark:bg-success/10 dark:border-success/30 dark:text-[#86efac]"
+    ),
+    icon: "text-success dark:text-[#4ade80]",
+    title: "text-[#14532d] dark:text-[#bbf7d0]"
+  },
+  error: {
+    container: cn(
+      "bg-error-light border-error/20 text-[#991b1b]",
+      "dark:bg-error/10 dark:border-error/30 dark:text-[#fca5a5]"
+    ),
+    icon: "text-error dark:text-[#f87171]",
+    title: "text-[#7f1d1d] dark:text-[#fecaca]"
+  },
+  warning: {
+    container: cn(
+      "bg-warning-light border-warning/20 text-[#854d0e]",
+      "dark:bg-warning/10 dark:border-warning/30 dark:text-[#fde047]"
+    ),
+    icon: "text-warning dark:text-[#facc15]",
+    title: "text-[#713f12] dark:text-[#fef08a]"
+  },
+  info: {
+    container: cn(
+      "bg-info-light border-info/20 text-[#1e40af]",
+      "dark:bg-info/10 dark:border-info/30 dark:text-[#93c5fd]"
+    ),
+    icon: "text-info dark:text-[#60a5fa]",
+    title: "text-[#1e3a8a] dark:text-[#bfdbfe]"
+  }
+};
+const Alert = forwardRef(
+  ({ variant = "info", title, message, icon, onClose, className, ...props }, ref) => {
+    const styles = variantStyles[variant];
+    const displayIcon = icon === null ? null : icon ?? defaultIcons[variant];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "rounded-lg border p-4",
+          styles.container,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+          displayIcon !== null && /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0", styles.icon), "aria-hidden": "true", children: displayIcon }),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex-1", displayIcon !== null && "ml-3"), children: [
+            title && /* @__PURE__ */ jsx("h3", { className: cn("text-sm font-medium", styles.title), children: title }),
+            /* @__PURE__ */ jsx("div", { className: cn("text-sm", title && "mt-1"), children: message })
+          ] }),
+          onClose && /* @__PURE__ */ jsx("div", { className: "ml-3 flex-shrink-0", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: cn(
+                "inline-flex rounded-md p-1.5",
+                "hover:opacity-75 focus:outline-none focus:ring-2 focus:ring-offset-2",
+                "focus:ring-current/20",
+                "dark:focus:ring-offset-primary-900"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Dismiss" }),
+                /* @__PURE__ */ jsx(XMarkIcon, {})
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+const sizeStyles$1 = {
+  xs: { container: "w-6 h-6", text: "text-xs", status: "w-2 h-2 border" },
+  sm: { container: "w-8 h-8", text: "text-sm", status: "w-2.5 h-2.5 border" },
+  md: { container: "w-10 h-10", text: "text-base", status: "w-3 h-3 border-2" },
+  lg: { container: "w-12 h-12", text: "text-lg", status: "w-3.5 h-3.5 border-2" },
+  xl: { container: "w-16 h-16", text: "text-2xl", status: "w-4 h-4 border-2" }
+};
+const statusStyles = {
+  online: "bg-success",
+  offline: "bg-primary-400 dark:bg-primary-500",
+  away: "bg-warning",
+  busy: "bg-error"
+};
+const Avatar = forwardRef(
+  ({ name, src, size: size2 = "md", alt, status, className, ...props }, ref) => {
+    const getInitials = (fullName) => {
+      const names = fullName.trim().split(" ");
+      if (names.length === 1) {
+        return names[0]?.charAt(0).toUpperCase() || "";
+      }
+      const firstName = names[0];
+      const lastName = names[names.length - 1];
+      return ((firstName?.charAt(0) || "") + (lastName?.charAt(0) || "")).toUpperCase();
+    };
+    const initials = getInitials(name);
+    const styles = sizeStyles$1[size2];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative inline-flex items-center justify-center",
+          "rounded-full font-medium",
+          // Light mode
+          "bg-gold-500 text-white",
+          // Dark mode
+          "dark:bg-gold-600 dark:text-white",
+          styles.container,
+          className
+        ),
+        ...props,
+        children: [
+          src ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: alt || `${name}'s avatar`,
+              className: "w-full h-full rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: styles.text, children: initials }),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "status",
+              className: cn(
+                "absolute bottom-0 right-0 rounded-full",
+                "border-white dark:border-primary-900",
+                styles.status,
+                statusStyles[status]
+              ),
+              "aria-label": `Status: ${status}`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+const OTPInput = ({
+  length = 6,
+  value,
+  onChange,
+  error: error2,
+  disabled = false,
+  autoFocus = false,
+  label = "One-time password",
+  className
+}) => {
+  const inputRefs = useRef([]);
+  const digits = value.split("").slice(0, length);
+  while (digits.length < length) {
+    digits.push("");
+  }
+  const focusInput = useCallback((index2) => {
+    const input = inputRefs.current[index2];
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }, []);
+  const handleChange = useCallback(
+    (index2, event_) => {
+      const newValue = event_.target.value;
+      if (!/^\d*$/.test(newValue)) return;
+      const digit = newValue.slice(-1);
+      const newDigits = [...digits];
+      newDigits[index2] = digit;
+      const newOtp = newDigits.join("");
+      onChange(newOtp);
+      if (digit && index2 < length - 1) {
+        focusInput(index2 + 1);
+      }
+    },
+    [digits, length, onChange, focusInput]
+  );
+  const handleKeyDown = useCallback(
+    (index2, event_) => {
+      switch (event_.key) {
+        case "Backspace":
+          if (!digits[index2] && index2 > 0) {
+            event_.preventDefault();
+            const newDigits = [...digits];
+            newDigits[index2 - 1] = "";
+            onChange(newDigits.join(""));
+            focusInput(index2 - 1);
+          } else if (digits[index2]) {
+            const newDigits = [...digits];
+            newDigits[index2] = "";
+            onChange(newDigits.join(""));
+          }
+          break;
+        case "ArrowLeft":
+          event_.preventDefault();
+          if (index2 > 0) {
+            focusInput(index2 - 1);
+          }
+          break;
+        case "ArrowRight":
+          event_.preventDefault();
+          if (index2 < length - 1) {
+            focusInput(index2 + 1);
+          }
+          break;
+        case "Delete": {
+          event_.preventDefault();
+          const newDigits = [...digits];
+          newDigits[index2] = "";
+          onChange(newDigits.join(""));
+          break;
+        }
+      }
+    },
+    [digits, length, onChange, focusInput]
+  );
+  const handlePaste = useCallback(
+    (event_) => {
+      event_.preventDefault();
+      const pastedData = event_.clipboardData.getData("text");
+      const pastedDigits = pastedData.replace(/\D/g, "").slice(0, length);
+      if (pastedDigits) {
+        onChange(pastedDigits);
+        const focusIndex = Math.min(pastedDigits.length, length - 1);
+        focusInput(focusIndex);
+      }
+    },
+    [length, onChange, focusInput]
+  );
+  const errorId = error2 ? "otp-input-error" : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), "data-testid": "otp-input", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": label,
+        "aria-describedby": errorId,
+        className: "flex justify-center gap-2 sm:gap-3",
+        children: digits.map((digit, index2) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: (element) => {
+              inputRefs.current[index2] = element;
+            },
+            type: "text",
+            inputMode: "numeric",
+            pattern: "\\d*",
+            maxLength: 1,
+            value: digit,
+            disabled,
+            autoFocus: autoFocus && index2 === 0,
+            "aria-label": `Digit ${index2 + 1} of ${length}`,
+            "aria-invalid": !!error2,
+            "data-testid": `otp-input-digit-${index2}`,
+            className: cn(
+              "w-10 h-12 sm:w-12 sm:h-14",
+              "text-center text-xl sm:text-2xl font-semibold",
+              "border-2 rounded-lg",
+              "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500",
+              "transition-colors duration-200",
+              // Light mode
+              error2 ? "border-error bg-error-light" : "border-primary-300 bg-white",
+              // Dark mode
+              error2 ? "dark:border-error dark:bg-error/10" : "dark:border-primary-600 dark:bg-primary-900 dark:text-white",
+              "dark:focus:ring-primary-400 dark:focus:border-primary-400",
+              disabled && "bg-primary-100 cursor-not-allowed opacity-50 dark:bg-primary-800"
+            ),
+            onChange: (event_) => handleChange(index2, event_),
+            onKeyDown: (event_) => handleKeyDown(index2, event_),
+            onPaste: handlePaste,
+            onFocus: (event_) => event_.target.select()
+          },
+          index2
+        ))
+      }
+    ),
+    error2 && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        role: "alert",
+        "aria-live": "assertive",
+        "data-testid": "otp-input-error",
+        className: cn(
+          "mt-2 text-sm text-center",
+          "text-error dark:text-[#fca5a5]"
+        ),
+        children: error2
+      }
+    )
+  ] });
+};
+const DateInput = forwardRef(
+  ({
+    value,
+    onChange,
+    label,
+    error: error2,
+    helperText,
+    fullWidth = false,
+    disabled = false,
+    className,
+    id,
+    required,
+    min: min2,
+    max: max2,
+    ...props
+  }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    const hasError = !!error2;
+    const errorId = hasError ? `${inputId}-error` : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn(fullWidth ? "w-full" : "w-auto"), children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white",
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-error", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "date",
+          id: inputId,
+          "data-testid": "date-input",
+          value: value || "",
+          onChange: (event_) => onChange(event_.target.value || null),
+          disabled,
+          required,
+          min: min2,
+          max: max2,
+          "aria-label": label ? void 0 : "Select date",
+          "aria-invalid": hasError ? "true" : void 0,
+          "aria-describedby": errorId,
+          className: cn(
+            // Base styles - Light mode
+            "block w-full rounded-md border bg-white px-4 py-2.5 text-sm text-primary-900",
+            "transition-colors duration-normal",
+            "focus:outline-none focus:ring-2",
+            "disabled:cursor-not-allowed disabled:bg-primary-50 disabled:text-primary-500",
+            // Base styles - Dark mode
+            "dark:bg-primary-800 dark:text-primary-100",
+            "dark:disabled:bg-primary-900 dark:disabled:text-primary-600",
+            // Border and focus styles
+            hasError ? "border-error focus:border-error focus:ring-error/20 dark:border-error/70 dark:focus:ring-error/30" : "border-primary-300 focus:border-gold-500 focus:ring-gold-500/20 dark:border-primary-600 dark:focus:border-gold-400 dark:focus:ring-gold-400/30",
+            // Custom className
+            className
+          ),
+          ...props
+        }
+      ),
+      (error2 || helperText) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId,
+          role: hasError ? "alert" : void 0,
+          className: cn(
+            "mt-1.5 text-sm",
+            hasError ? "text-error" : "text-primary-500 dark:text-primary-400"
+          ),
+          children: error2 || helperText
+        }
+      )
+    ] });
+  }
+);
+DateInput.displayName = "DateInput";
+const sizeStyles = {
+  sm: "px-2.5 py-1 text-xs gap-1",
+  md: "px-3 py-1.5 text-sm gap-1.5",
+  lg: "px-4 py-2 text-base gap-2"
+};
+const checkmarkSize = {
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+  lg: "w-5 h-5"
+};
+const PillSelector = forwardRef(
+  ({
+    options,
+    selected,
+    onChange,
+    multiple = true,
+    size: size2 = "md",
+    label,
+    fullWidth = false,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => {
+    const handleClick = (value) => {
+      if (disabled) return;
+      if (multiple) {
+        if (selected.includes(value)) {
+          onChange(selected.filter((v2) => v2 !== value));
+        } else {
+          onChange([...selected, value]);
+        }
+      } else {
+        onChange([value]);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(fullWidth ? "w-full" : "w-auto", className),
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-primary-700 dark:text-white", children: label }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": label, children: options.map((option) => {
+            const isSelected = selected.includes(option.value);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                disabled,
+                "aria-pressed": isSelected,
+                onClick: () => handleClick(option.value),
+                className: cn(
+                  "inline-flex items-center justify-center rounded-full border font-medium",
+                  "transition-colors duration-normal",
+                  "focus:outline-none focus:ring-2 focus:ring-offset-1",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  sizeStyles[size2],
+                  isSelected ? cn(
+                    // Light mode - selected
+                    "border-primary-700 bg-primary-700 text-white",
+                    "hover:bg-primary-800 hover:border-primary-800",
+                    "focus:ring-primary-500/30",
+                    // Dark mode - selected
+                    "dark:border-gold-500 dark:bg-gold-500 dark:text-primary-900",
+                    "dark:hover:bg-gold-400 dark:hover:border-gold-400",
+                    "dark:focus:ring-gold-400/30"
+                  ) : cn(
+                    // Light mode - unselected
+                    "border-primary-300 bg-white text-primary-700",
+                    "hover:border-primary-400 hover:bg-primary-50",
+                    "focus:ring-primary-500/20",
+                    // Dark mode - unselected
+                    "dark:border-primary-600 dark:bg-primary-800 dark:text-primary-200",
+                    "dark:hover:border-primary-500 dark:hover:bg-primary-700",
+                    "dark:focus:ring-primary-400/20"
+                  )
+                ),
+                children: [
+                  isSelected && /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: checkmarkSize[size2],
+                      fill: "currentColor",
+                      viewBox: "0 0 20 20",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          fillRule: "evenodd",
+                          clipRule: "evenodd",
+                          d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+                        }
+                      )
+                    }
+                  ),
+                  option.icon,
+                  /* @__PURE__ */ jsx("span", { children: option.label })
+                ]
+              },
+              option.value
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+PillSelector.displayName = "PillSelector";
 export {
+  Alert,
+  Avatar,
   Badge,
   Breadcrumbs,
   Button,
@@ -9938,13 +10439,16 @@ export {
   Checkbox,
   Combobox,
   ConfirmDialog,
+  DateInput,
   Drawer,
   EmptyState,
   Input,
   Modal,
   MultiSelect,
+  OTPInput,
   Pagination,
   PasswordInput,
+  PillSelector,
   Radio,
   RadioGroup,
   Select,