analytica-frontend-lib 1.0.28 → 1.0.30

package/dist/index.mjs

@@ -1013,23 +1013,188 @@ var Toaster = () => {
 };
 var Toaster_default = Toaster;
 
+// src/components/Input/Input.tsx
+import { WarningCircle as WarningCircle3, Eye, EyeSlash } from "phosphor-react";
+import {
+  forwardRef as forwardRef7,
+  useState as useState3,
+  useId as useId3,
+  useMemo
+} from "react";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var SIZE_CLASSES5 = {
+  small: "text-sm",
+  medium: "text-md",
+  large: "text-lg",
+  "extra-large": "text-xl"
+};
+var STATE_CLASSES3 = {
+  default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
+  error: "border-2 border-indicator-error placeholder:text-text-600",
+  disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
+  "read-only": "border-border-300 !text-text-600 cursor-default focus:outline-none bg-background-50"
+};
+var VARIANT_CLASSES = {
+  outlined: "border rounded-lg",
+  underlined: "border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2",
+  rounded: "border rounded-full"
+};
+var getActualState = (disabled, readOnly, errorMessage, state) => {
+  if (disabled) return "disabled";
+  if (readOnly) return "read-only";
+  if (errorMessage) return "error";
+  return state || "default";
+};
+var getIconSize = (size) => {
+  const iconSizeClasses = {
+    small: "w-4 h-4",
+    medium: "w-5 h-5",
+    large: "w-6 h-6",
+    "extra-large": "w-7 h-7"
+  };
+  return iconSizeClasses[size] || iconSizeClasses.medium;
+};
+var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight) => {
+  const isPasswordType = type === "password";
+  const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;
+  let actualIconRight = iconRight;
+  let ariaLabel;
+  if (shouldShowPasswordToggle) {
+    actualIconRight = showPassword ? /* @__PURE__ */ jsx14(EyeSlash, {}) : /* @__PURE__ */ jsx14(Eye, {});
+    ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
+  }
+  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
+};
+var getCombinedClasses = (actualState, variant) => {
+  const stateClasses = STATE_CLASSES3[actualState];
+  const variantClasses = VARIANT_CLASSES[variant];
+  if (actualState === "error" && variant === "underlined") {
+    return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
+  }
+  return `${stateClasses} ${variantClasses}`;
+};
+var Input = forwardRef7(
+  ({
+    label,
+    helperText,
+    errorMessage,
+    size = "medium",
+    variant = "outlined",
+    state = "default",
+    iconLeft,
+    iconRight,
+    className = "",
+    containerClassName = "",
+    disabled,
+    readOnly,
+    id,
+    type = "text",
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = useState3(false);
+    const isPasswordType = type === "password";
+    const actualType = isPasswordType && showPassword ? "text" : type;
+    const actualState = getActualState(disabled, readOnly, errorMessage, state);
+    const sizeClasses = SIZE_CLASSES5[size];
+    const combinedClasses = useMemo(
+      () => getCombinedClasses(actualState, variant),
+      [actualState, variant]
+    );
+    const iconSize = getIconSize(size);
+    const baseClasses = "bg-background w-full py-2 px-3 font-normal text-text-900 focus:outline-primary-950";
+    const generatedId = useId3();
+    const inputId = id ?? `input-${generatedId}`;
+    const togglePasswordVisibility = () => setShowPassword(!showPassword);
+    const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
+      type,
+      disabled,
+      readOnly,
+      showPassword,
+      iconRight
+    );
+    return /* @__PURE__ */ jsxs10("div", { className: `${containerClassName}`, children: [
+      label && /* @__PURE__ */ jsx14(
+        "label",
+        {
+          htmlFor: inputId,
+          className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+        iconLeft && /* @__PURE__ */ jsx14("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: `${iconSize} text-text-400 flex items-center justify-center`,
+            children: iconLeft
+          }
+        ) }),
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            ref,
+            id: inputId,
+            type: actualType,
+            className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
+            disabled,
+            readOnly,
+            "aria-invalid": actualState === "error" ? "true" : void 0,
+            ...props
+          }
+        ),
+        actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
+            onClick: togglePasswordVisibility,
+            "aria-label": ariaLabel,
+            children: /* @__PURE__ */ jsx14(
+              "span",
+              {
+                className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
+                children: actualIconRight
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx14("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: `${iconSize} text-text-400 flex items-center justify-center`,
+            children: actualIconRight
+          }
+        ) }))
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "mt-1.5 gap-1.5", children: [
+        helperText && /* @__PURE__ */ jsx14("p", { className: "text-sm text-text-500", children: helperText }),
+        errorMessage && /* @__PURE__ */ jsxs10("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
+          /* @__PURE__ */ jsx14(WarningCircle3, { size: 16 }),
+          " ",
+          errorMessage
+        ] })
+      ] })
+    ] });
+  }
+);
+var Input_default = Input;
+
 // src/components/DropdownMenu/DropdownMenu.tsx
 import {
   createContext,
-  useState as useState3,
+  useState as useState4,
   useCallback,
   useContext,
-  forwardRef as forwardRef7,
+  forwardRef as forwardRef8,
   useEffect,
   useRef,
-  useMemo
+  useMemo as useMemo2
 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var DropdownMenuContext = createContext(
   void 0
 );
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = useState3(false);
+  const [internalOpen, setInternalOpen] = useState4(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
   const setOpen = useCallback(
@@ -1083,18 +1248,18 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
-  const value = useMemo(
+  const value = useMemo2(
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ jsx14(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx14("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ jsx15(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx15("div", { className: "relative", ref: menuRef, children }) });
 };
-var DropdownMenuTrigger = forwardRef7(({ className, children, onClick, ...props }, ref) => {
+var DropdownMenuTrigger = forwardRef8(({ className, children, onClick, ...props }, ref) => {
   const context = useContext(DropdownMenuContext);
   if (!context)
     throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
   const { open, setOpen } = context;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       ref,
@@ -1126,7 +1291,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = forwardRef7(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx14(
+var MenuLabel = forwardRef8(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx15(
   "fieldset",
   {
     ref,
@@ -1136,7 +1301,7 @@ var MenuLabel = forwardRef7(({ className, inset, ...props }, ref) => /* @__PURE_
   }
 ));
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = forwardRef7(
+var MenuContent = forwardRef8(
   ({
     className,
     align = "start",
@@ -1146,7 +1311,7 @@ var MenuContent = forwardRef7(
     ...props
   }, ref) => {
     const { open } = useContext(DropdownMenuContext);
-    const [isVisible, setIsVisible] = useState3(open);
+    const [isVisible, setIsVisible] = useState4(open);
     useEffect(() => {
       if (open) {
         setIsVisible(true);
@@ -1161,7 +1326,7 @@ var MenuContent = forwardRef7(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         ref,
@@ -1185,7 +1350,7 @@ var MenuContent = forwardRef7(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = forwardRef7(
+var MenuItem = forwardRef8(
   ({
     className,
     inset,
@@ -1206,7 +1371,7 @@ var MenuItem = forwardRef7(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         ref,
@@ -1236,7 +1401,7 @@ var MenuItem = forwardRef7(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var MenuSeparator = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
   "div",
   {
     ref,
@@ -1259,6 +1424,7 @@ export {
   DropdownMenuTrigger,
   IconButton_default as IconButton,
   IconRoundedButton_default as IconRoundedButton,
+  Input_default as Input,
   NavButton_default as NavButton,
   SelectionButton_default as SelectionButton,
   Table_default as Table,