analytica-frontend-lib 1.0.28 → 1.0.30

package/dist/index.d.ts

@@ -12,7 +12,33 @@ export { default as TextArea } from './TextArea/index.js';
 export { default as Toast } from './Toast/index.js';
 export { default as Toaster } from './Toast/Toaster/index.js';
 export { default as useToastStore } from './Toast/ToastStore/index.js';
+import * as react from 'react';
+import { ReactNode, InputHTMLAttributes } from 'react';
 export { default as DropdownMenu, MenuContent as DropdownMenuContent, MenuItem as DropdownMenuItem, MenuLabel as DropdownMenuLabel, MenuSeparator as DropdownMenuSeparator, DropdownMenuTrigger } from './DropdownMenu/index.js';
 import 'react/jsx-runtime';
-import 'react';
 import 'zustand';
+
+declare const Input: react.ForwardRefExoticComponent<{
+    /** Label text displayed above the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Error message displayed below the input */
+    errorMessage?: string;
+    /** Size of the input */
+    size?: "small" | "medium" | "large" | "extra-large";
+    /** Visual variant of the input */
+    variant?: "outlined" | "underlined" | "rounded";
+    /** Current state of the input */
+    state?: "default" | "error" | "disabled" | "read-only";
+    /** Icon to display on the left side of the input */
+    iconLeft?: ReactNode;
+    /** Icon to display on the right side of the input */
+    iconRight?: ReactNode;
+    /** Additional CSS classes to apply to the input */
+    className?: string;
+    /** Additional CSS classes to apply to the container */
+    containerClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & react.RefAttributes<HTMLInputElement>>;
+
+export { Input };

package/dist/index.js

@@ -32,6 +32,7 @@ __export(src_exports, {
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   IconButton: () => IconButton_default,
   IconRoundedButton: () => IconRoundedButton_default,
+  Input: () => Input_default,
   NavButton: () => NavButton_default,
   SelectionButton: () => SelectionButton_default,
   Table: () => Table_default,
@@ -1050,24 +1051,184 @@ var Toaster = () => {
 };
 var Toaster_default = Toaster;
 
-// src/components/DropdownMenu/DropdownMenu.tsx
+// src/components/Input/Input.tsx
+var import_phosphor_react5 = require("phosphor-react");
 var import_react7 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var DropdownMenuContext = (0, import_react7.createContext)(
+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__ */ (0, import_jsx_runtime14.jsx)(import_phosphor_react5.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_phosphor_react5.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 = (0, import_react7.forwardRef)(
+  ({
+    label,
+    helperText,
+    errorMessage,
+    size = "medium",
+    variant = "outlined",
+    state = "default",
+    iconLeft,
+    iconRight,
+    className = "",
+    containerClassName = "",
+    disabled,
+    readOnly,
+    id,
+    type = "text",
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = (0, import_react7.useState)(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 = (0, import_react7.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 = (0, import_react7.useId)();
+    const inputId = id ?? `input-${generatedId}`;
+    const togglePasswordVisibility = () => setShowPassword(!showPassword);
+    const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
+      type,
+      disabled,
+      readOnly,
+      showPassword,
+      iconRight
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `${containerClassName}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "label",
+        {
+          htmlFor: inputId,
+          className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "span",
+          {
+            className: `${iconSize} text-text-400 flex items-center justify-center`,
+            children: iconLeft
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "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__ */ (0, import_jsx_runtime14.jsx)(
+          "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__ */ (0, import_jsx_runtime14.jsx)(
+              "span",
+              {
+                className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
+                children: actualIconRight
+              }
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "span",
+          {
+            className: `${iconSize} text-text-400 flex items-center justify-center`,
+            children: actualIconRight
+          }
+        ) }))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_phosphor_react5.WarningCircle, { size: 16 }),
+          " ",
+          errorMessage
+        ] })
+      ] })
+    ] });
+  }
+);
+var Input_default = Input;
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_react8 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var DropdownMenuContext = (0, import_react8.createContext)(
   void 0
 );
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react7.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react8.useState)(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
-  const setOpen = (0, import_react7.useCallback)(
+  const setOpen = (0, import_react8.useCallback)(
     (newOpen) => {
       if (onOpenChange) onOpenChange(newOpen);
       if (!isControlled) setInternalOpen(newOpen);
     },
     [isControlled, onOpenChange]
   );
-  const menuRef = (0, import_react7.useRef)(null);
+  const menuRef = (0, import_react8.useRef)(null);
   const handleArrowDownOrArrowUp = (event) => {
     const menuContent = menuRef.current?.querySelector('[role="menu"]');
     if (menuContent) {
@@ -1101,7 +1262,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       setOpen(false);
     }
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
       document.addEventListener("keydown", handleDownkey);
@@ -1111,18 +1272,18 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
-  const value = (0, import_react7.useMemo)(
+  const value = (0, import_react8.useMemo)(
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative", ref: menuRef, children }) });
 };
-var DropdownMenuTrigger = (0, import_react7.forwardRef)(({ className, children, onClick, ...props }, ref) => {
-  const context = (0, import_react7.useContext)(DropdownMenuContext);
+var DropdownMenuTrigger = (0, import_react8.forwardRef)(({ className, children, onClick, ...props }, ref) => {
+  const context = (0, import_react8.useContext)(DropdownMenuContext);
   if (!context)
     throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
   const { open, setOpen } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "button",
     {
       ref,
@@ -1154,7 +1315,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = (0, import_react7.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var MenuLabel = (0, import_react8.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "fieldset",
   {
     ref,
@@ -1164,7 +1325,7 @@ var MenuLabel = (0, import_react7.forwardRef)(({ className, inset, ...props }, r
   }
 ));
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = (0, import_react7.forwardRef)(
+var MenuContent = (0, import_react8.forwardRef)(
   ({
     className,
     align = "start",
@@ -1173,9 +1334,9 @@ var MenuContent = (0, import_react7.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const { open } = (0, import_react7.useContext)(DropdownMenuContext);
-    const [isVisible, setIsVisible] = (0, import_react7.useState)(open);
-    (0, import_react7.useEffect)(() => {
+    const { open } = (0, import_react8.useContext)(DropdownMenuContext);
+    const [isVisible, setIsVisible] = (0, import_react8.useState)(open);
+    (0, import_react8.useEffect)(() => {
       if (open) {
         setIsVisible(true);
       } else {
@@ -1189,7 +1350,7 @@ var MenuContent = (0, import_react7.forwardRef)(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref,
@@ -1213,7 +1374,7 @@ var MenuContent = (0, import_react7.forwardRef)(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = (0, import_react7.forwardRef)(
+var MenuItem = (0, import_react8.forwardRef)(
   ({
     className,
     inset,
@@ -1234,7 +1395,7 @@ var MenuItem = (0, import_react7.forwardRef)(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         ref,
@@ -1264,7 +1425,7 @@ var MenuItem = (0, import_react7.forwardRef)(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react7.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var MenuSeparator = (0, import_react8.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "div",
   {
     ref,
@@ -1288,6 +1449,7 @@ var DropdownMenu_default = DropdownMenu;
   DropdownMenuTrigger,
   IconButton,
   IconRoundedButton,
+  Input,
   NavButton,
   SelectionButton,
   Table,