analytica-frontend-lib 1.0.91 → 1.0.92

package/dist/IconRoundedButton/index.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+/**
+ * IconRoundedButton component props interface
+ */
+type IconRoundedButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconRoundedButton component for Analytica Ensino platforms
+ *
+ * Um botão redondo simples que exibe apenas um ícone.
+ * Ideal para ações como navegação, fechar, editar, etc.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button estilizado e redondo
+ *
+ * @example
+ * ```tsx
+ * <IconRoundedButton
+ *   icon={<ChevronRightIcon />}
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconRoundedButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { IconRoundedButton as default };

package/dist/IconRoundedButton/index.d.ts

@@ -1 +1,34 @@
-export * from '../index';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+/**
+ * IconRoundedButton component props interface
+ */
+type IconRoundedButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconRoundedButton component for Analytica Ensino platforms
+ *
+ * Um botão redondo simples que exibe apenas um ícone.
+ * Ideal para ações como navegação, fechar, editar, etc.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button estilizado e redondo
+ *
+ * @example
+ * ```tsx
+ * <IconRoundedButton
+ *   icon={<ChevronRightIcon />}
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconRoundedButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { IconRoundedButton as default };

package/dist/IconRoundedButton/index.js

@@ -72,3 +72,4 @@ var IconRoundedButton = ({
   );
 };
 var IconRoundedButton_default = IconRoundedButton;
+//# sourceMappingURL=index.js.map

package/dist/IconRoundedButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/IconRoundedButton/IconRoundedButton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * IconRoundedButton component props interface\n */\ntype IconRoundedButtonProps = {\n  /** Ícone a ser exibido no botão */\n  icon: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * IconRoundedButton component for Analytica Ensino platforms\n *\n * Um botão redondo simples que exibe apenas um ícone.\n * Ideal para ações como navegação, fechar, editar, etc.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button estilizado e redondo\n *\n * @example\n * ```tsx\n * <IconRoundedButton\n *   icon={<ChevronRightIcon />}\n *   onClick={() => console.log('clicked')}\n * />\n * ```\n */\nconst IconRoundedButton = ({\n  icon,\n  className = '',\n  disabled,\n  ...props\n}: IconRoundedButtonProps) => {\n  const baseClasses = [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'w-8',\n    'h-8',\n    'rounded-full',\n    'cursor-pointer',\n    'border',\n    'border-background-200',\n    'bg-background',\n    'text-text-950',\n    'hover:shadow-hard-shadow-1',\n    'focus-visible:outline-none',\n    'focus-visible:shadow-hard-shadow-1',\n    'focus-visible:ring-2',\n    'focus-visible:ring-indicator-info',\n    'focus-visible:ring-offset-0',\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n  ].join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={cn(baseClasses, className)}\n      disabled={disabled}\n      {...props}\n    >\n      <span className=\"flex items-center justify-center w-5 h-5\">{icon}</span>\n    </button>\n  );\n};\n\nexport default IconRoundedButton;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD8DM;AAnCN,IAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAA8B;AAC5B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,aAAa,SAAS;AAAA,MACpC;AAAA,MACC,GAAG;AAAA,MAEJ,sDAAC,UAAK,WAAU,4CAA4C,gBAAK;AAAA;AAAA,EACnE;AAEJ;AAEA,IAAO,4BAAQ;","names":[]}

package/dist/IconRoundedButton/index.mjs

@@ -49,3 +49,4 @@ var IconRoundedButton_default = IconRoundedButton;
 export {
   IconRoundedButton_default as default
 };
+//# sourceMappingURL=index.mjs.map

package/dist/IconRoundedButton/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/IconRoundedButton/IconRoundedButton.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * IconRoundedButton component props interface\n */\ntype IconRoundedButtonProps = {\n  /** Ícone a ser exibido no botão */\n  icon: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * IconRoundedButton component for Analytica Ensino platforms\n *\n * Um botão redondo simples que exibe apenas um ícone.\n * Ideal para ações como navegação, fechar, editar, etc.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button estilizado e redondo\n *\n * @example\n * ```tsx\n * <IconRoundedButton\n *   icon={<ChevronRightIcon />}\n *   onClick={() => console.log('clicked')}\n * />\n * ```\n */\nconst IconRoundedButton = ({\n  icon,\n  className = '',\n  disabled,\n  ...props\n}: IconRoundedButtonProps) => {\n  const baseClasses = [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'w-8',\n    'h-8',\n    'rounded-full',\n    'cursor-pointer',\n    'border',\n    'border-background-200',\n    'bg-background',\n    'text-text-950',\n    'hover:shadow-hard-shadow-1',\n    'focus-visible:outline-none',\n    'focus-visible:shadow-hard-shadow-1',\n    'focus-visible:ring-2',\n    'focus-visible:ring-indicator-info',\n    'focus-visible:ring-offset-0',\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n  ].join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={cn(baseClasses, className)}\n      disabled={disabled}\n      {...props}\n    >\n      <span className=\"flex items-center justify-center w-5 h-5\">{icon}</span>\n    </button>\n  );\n};\n\nexport default IconRoundedButton;\n"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AC8DM;AAnCN,IAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAA8B;AAC5B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,aAAa,SAAS;AAAA,MACpC;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,UAAK,WAAU,4CAA4C,gBAAK;AAAA;AAAA,EACnE;AAEJ;AAEA,IAAO,4BAAQ;","names":[]}

package/dist/Input/index.d.mts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ReactNode, InputHTMLAttributes } from 'react';
+
+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 as default };

package/dist/Input/index.d.ts

@@ -1 +1,27 @@
-export * from '../index';
+import * as react from 'react';
+import { ReactNode, InputHTMLAttributes } from 'react';
+
+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 as default };

package/dist/Input/index.js

@@ -184,3 +184,4 @@ var Input = (0, import_react.forwardRef)(
   }
 );
 var Input_default = Input;
+//# sourceMappingURL=index.js.map

package/dist/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input/Input.tsx"],"sourcesContent":["import { WarningCircle, Eye, EyeSlash } from 'phosphor-react';\nimport {\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  useMemo,\n} from 'react';\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n  'extra-large': 'text-xl',\n} as const;\n\n/**\n * Lookup table for state classes\n */\nconst STATE_CLASSES = {\n  default:\n    'border-border-300 placeholder:text-text-600 hover:border-border-400',\n  error: 'border-2 border-indicator-error placeholder:text-text-600',\n  disabled:\n    'border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40',\n  'read-only':\n    'border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent',\n} as const;\n\n/**\n * Lookup table for variant classes\n */\nconst VARIANT_CLASSES = {\n  outlined: 'border rounded-lg',\n  underlined:\n    'border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2',\n  rounded: 'border rounded-full',\n} as const;\n\n/**\n * Input component props interface\n */\ntype InputProps = {\n  /** Label text displayed above the input */\n  label?: string;\n  /** Helper text displayed below the input */\n  helperText?: string;\n  /** Error message displayed below the input */\n  errorMessage?: string;\n  /** Size of the input */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /** Visual variant of the input */\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  /** Current state of the input */\n  state?: 'default' | 'error' | 'disabled' | 'read-only';\n  /** Icon to display on the left side of the input */\n  iconLeft?: ReactNode;\n  /** Icon to display on the right side of the input */\n  iconRight?: ReactNode;\n  /** Additional CSS classes to apply to the input */\n  className?: string;\n  /** Additional CSS classes to apply to the container */\n  containerClassName?: string;\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;\n\n/**\n * Input component for Analytica Ensino platforms\n *\n * A flexible input component with multiple sizes, states, and support for icons.\n * Includes label, helper text, and error message functionality.\n * Features automatic password visibility toggle for password inputs.\n *\n * @param label - Optional label text displayed above the input\n * @param helperText - Optional helper text displayed below the input\n * @param errorMessage - Optional error message displayed below the input\n * @param size - The size variant (small, medium, large, extra-large)\n * @param variant - The visual variant (outlined, underlined, rounded)\n * @param state - The current state (default, error, disabled, read-only)\n * @param iconLeft - Optional icon displayed on the left side\n * @param iconRight - Optional icon displayed on the right side (overridden by password toggle for password inputs)\n * @param type - Input type (text, email, password, etc.) - password type automatically includes show/hide toggle\n * @param className - Additional CSS classes for the input\n * @param containerClassName - Additional CSS classes for the container\n * @param props - All other standard input HTML attributes\n * @returns A styled input element with optional label and helper text\n *\n * @example\n * ```tsx\n * // Basic input\n * <Input\n *   label=\"Email\"\n *   placeholder=\"Digite seu email\"\n *   helperText=\"Usaremos apenas para contato\"\n *   size=\"medium\"\n *   variant=\"outlined\"\n *   state=\"default\"\n * />\n *\n * // Password input with automatic toggle\n * <Input\n *   label=\"Senha\"\n *   type=\"password\"\n *   placeholder=\"Digite sua senha\"\n *   helperText=\"Clique no olho para mostrar/ocultar\"\n * />\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst getActualState = (\n  disabled?: boolean,\n  readOnly?: boolean,\n  errorMessage?: string,\n  state?: string\n): keyof typeof STATE_CLASSES => {\n  if (disabled) return 'disabled';\n  if (readOnly) return 'read-only';\n  if (errorMessage) return 'error';\n  return (state as keyof typeof STATE_CLASSES) || 'default';\n};\n\nconst getIconSize = (size: string) => {\n  const iconSizeClasses = {\n    small: 'w-4 h-4',\n    medium: 'w-5 h-5',\n    large: 'w-6 h-6',\n    'extra-large': 'w-7 h-7',\n  };\n  return (\n    iconSizeClasses[size as keyof typeof iconSizeClasses] ||\n    iconSizeClasses.medium\n  );\n};\n\nconst getPasswordToggleConfig = (\n  type?: string,\n  disabled?: boolean,\n  readOnly?: boolean,\n  showPassword?: boolean,\n  iconRight?: ReactNode\n) => {\n  const isPasswordType = type === 'password';\n  const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;\n\n  let actualIconRight = iconRight;\n  let ariaLabel: string | undefined;\n\n  if (shouldShowPasswordToggle) {\n    actualIconRight = showPassword ? <EyeSlash /> : <Eye />;\n    ariaLabel = showPassword ? 'Ocultar senha' : 'Mostrar senha';\n  }\n\n  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };\n};\n\nconst getCombinedClasses = (\n  actualState: keyof typeof STATE_CLASSES,\n  variant: keyof typeof VARIANT_CLASSES\n) => {\n  const stateClasses = STATE_CLASSES[actualState];\n  const variantClasses = VARIANT_CLASSES[variant];\n\n  // Special case: error state with underlined variant\n  if (actualState === 'error' && variant === 'underlined') {\n    return 'border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600';\n  }\n\n  // Special case: read-only state with underlined variant\n  if (actualState === 'read-only' && variant === 'underlined') {\n    return 'border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default';\n  }\n\n  return `${stateClasses} ${variantClasses}`;\n};\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      helperText,\n      errorMessage,\n      size = 'medium',\n      variant = 'outlined',\n      state = 'default',\n      iconLeft,\n      iconRight,\n      className = '',\n      containerClassName = '',\n      disabled,\n      readOnly,\n      id,\n      type = 'text',\n      ...props\n    },\n    ref\n  ) => {\n    // State for password visibility toggle\n    const [showPassword, setShowPassword] = useState(false);\n    const isPasswordType = type === 'password';\n    const actualType = isPasswordType && showPassword ? 'text' : type;\n    const actualState = getActualState(disabled, readOnly, errorMessage, state);\n\n    // Get classes from lookup tables\n    const sizeClasses = SIZE_CLASSES[size];\n    const combinedClasses = useMemo(\n      () => getCombinedClasses(actualState, variant),\n      [actualState, variant]\n    );\n    const iconSize = getIconSize(size);\n\n    const baseClasses = `bg-background w-full py-2 ${\n      actualState === 'read-only' ? 'px-0' : 'px-3'\n    } font-normal text-text-900 focus:outline-primary-950`;\n\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `input-${generatedId}`;\n\n    // Handle password visibility toggle\n    const togglePasswordVisibility = () => setShowPassword(!showPassword);\n\n    // Get password toggle configuration\n    const { shouldShowPasswordToggle, actualIconRight, ariaLabel } =\n      getPasswordToggleConfig(\n        type,\n        disabled,\n        readOnly,\n        showPassword,\n        iconRight\n      );\n\n    return (\n      <div className={`${containerClassName}`}>\n        {/* Label */}\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={`block font-bold text-text-900 mb-1.5 ${sizeClasses}`}\n          >\n            {label}\n          </label>\n        )}\n\n        {/* Input Container */}\n        <div className=\"relative\">\n          {/* Left Icon */}\n          {iconLeft && (\n            <div className=\"absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none\">\n              <span\n                className={`${iconSize} text-text-400 flex items-center justify-center`}\n              >\n                {iconLeft}\n              </span>\n            </div>\n          )}\n\n          {/* Input Field */}\n          <input\n            ref={ref}\n            id={inputId}\n            type={actualType}\n            className={`${baseClasses} ${sizeClasses} ${combinedClasses} ${\n              iconLeft ? 'pl-10' : ''\n            } ${actualIconRight ? 'pr-10' : ''} ${className}`}\n            disabled={disabled}\n            readOnly={readOnly}\n            aria-invalid={actualState === 'error' ? 'true' : undefined}\n            {...props}\n          />\n\n          {/* Right Icon */}\n          {actualIconRight &&\n            (shouldShowPasswordToggle ? (\n              <button\n                type=\"button\"\n                className=\"absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0\"\n                onClick={togglePasswordVisibility}\n                aria-label={ariaLabel}\n              >\n                <span\n                  className={`${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`}\n                >\n                  {actualIconRight}\n                </span>\n              </button>\n            ) : (\n              <div className=\"absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none\">\n                <span\n                  className={`${iconSize} text-text-400 flex items-center justify-center`}\n                >\n                  {actualIconRight}\n                </span>\n              </div>\n            ))}\n        </div>\n\n        {/* Helper Text or Error Message */}\n        <div className=\"mt-1.5 gap-1.5\">\n          {helperText && <p className=\"text-sm text-text-500\">{helperText}</p>}\n          {errorMessage && (\n            <p className=\"flex gap-1 items-center text-sm text-indicator-error\">\n              <WarningCircle size={16} /> {errorMessage}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default Input;\n"],"mappings":"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","names":[]}

package/dist/Input/index.mjs

@@ -168,3 +168,4 @@ var Input_default = Input;
 export {
   Input_default as default
 };
+//# sourceMappingURL=index.mjs.map

package/dist/Input/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input/Input.tsx"],"sourcesContent":["import { WarningCircle, Eye, EyeSlash } from 'phosphor-react';\nimport {\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  useMemo,\n} from 'react';\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n  'extra-large': 'text-xl',\n} as const;\n\n/**\n * Lookup table for state classes\n */\nconst STATE_CLASSES = {\n  default:\n    'border-border-300 placeholder:text-text-600 hover:border-border-400',\n  error: 'border-2 border-indicator-error placeholder:text-text-600',\n  disabled:\n    'border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40',\n  'read-only':\n    'border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent',\n} as const;\n\n/**\n * Lookup table for variant classes\n */\nconst VARIANT_CLASSES = {\n  outlined: 'border rounded-lg',\n  underlined:\n    'border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2',\n  rounded: 'border rounded-full',\n} as const;\n\n/**\n * Input component props interface\n */\ntype InputProps = {\n  /** Label text displayed above the input */\n  label?: string;\n  /** Helper text displayed below the input */\n  helperText?: string;\n  /** Error message displayed below the input */\n  errorMessage?: string;\n  /** Size of the input */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /** Visual variant of the input */\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  /** Current state of the input */\n  state?: 'default' | 'error' | 'disabled' | 'read-only';\n  /** Icon to display on the left side of the input */\n  iconLeft?: ReactNode;\n  /** Icon to display on the right side of the input */\n  iconRight?: ReactNode;\n  /** Additional CSS classes to apply to the input */\n  className?: string;\n  /** Additional CSS classes to apply to the container */\n  containerClassName?: string;\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;\n\n/**\n * Input component for Analytica Ensino platforms\n *\n * A flexible input component with multiple sizes, states, and support for icons.\n * Includes label, helper text, and error message functionality.\n * Features automatic password visibility toggle for password inputs.\n *\n * @param label - Optional label text displayed above the input\n * @param helperText - Optional helper text displayed below the input\n * @param errorMessage - Optional error message displayed below the input\n * @param size - The size variant (small, medium, large, extra-large)\n * @param variant - The visual variant (outlined, underlined, rounded)\n * @param state - The current state (default, error, disabled, read-only)\n * @param iconLeft - Optional icon displayed on the left side\n * @param iconRight - Optional icon displayed on the right side (overridden by password toggle for password inputs)\n * @param type - Input type (text, email, password, etc.) - password type automatically includes show/hide toggle\n * @param className - Additional CSS classes for the input\n * @param containerClassName - Additional CSS classes for the container\n * @param props - All other standard input HTML attributes\n * @returns A styled input element with optional label and helper text\n *\n * @example\n * ```tsx\n * // Basic input\n * <Input\n *   label=\"Email\"\n *   placeholder=\"Digite seu email\"\n *   helperText=\"Usaremos apenas para contato\"\n *   size=\"medium\"\n *   variant=\"outlined\"\n *   state=\"default\"\n * />\n *\n * // Password input with automatic toggle\n * <Input\n *   label=\"Senha\"\n *   type=\"password\"\n *   placeholder=\"Digite sua senha\"\n *   helperText=\"Clique no olho para mostrar/ocultar\"\n * />\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst getActualState = (\n  disabled?: boolean,\n  readOnly?: boolean,\n  errorMessage?: string,\n  state?: string\n): keyof typeof STATE_CLASSES => {\n  if (disabled) return 'disabled';\n  if (readOnly) return 'read-only';\n  if (errorMessage) return 'error';\n  return (state as keyof typeof STATE_CLASSES) || 'default';\n};\n\nconst getIconSize = (size: string) => {\n  const iconSizeClasses = {\n    small: 'w-4 h-4',\n    medium: 'w-5 h-5',\n    large: 'w-6 h-6',\n    'extra-large': 'w-7 h-7',\n  };\n  return (\n    iconSizeClasses[size as keyof typeof iconSizeClasses] ||\n    iconSizeClasses.medium\n  );\n};\n\nconst getPasswordToggleConfig = (\n  type?: string,\n  disabled?: boolean,\n  readOnly?: boolean,\n  showPassword?: boolean,\n  iconRight?: ReactNode\n) => {\n  const isPasswordType = type === 'password';\n  const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;\n\n  let actualIconRight = iconRight;\n  let ariaLabel: string | undefined;\n\n  if (shouldShowPasswordToggle) {\n    actualIconRight = showPassword ? <EyeSlash /> : <Eye />;\n    ariaLabel = showPassword ? 'Ocultar senha' : 'Mostrar senha';\n  }\n\n  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };\n};\n\nconst getCombinedClasses = (\n  actualState: keyof typeof STATE_CLASSES,\n  variant: keyof typeof VARIANT_CLASSES\n) => {\n  const stateClasses = STATE_CLASSES[actualState];\n  const variantClasses = VARIANT_CLASSES[variant];\n\n  // Special case: error state with underlined variant\n  if (actualState === 'error' && variant === 'underlined') {\n    return 'border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600';\n  }\n\n  // Special case: read-only state with underlined variant\n  if (actualState === 'read-only' && variant === 'underlined') {\n    return 'border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default';\n  }\n\n  return `${stateClasses} ${variantClasses}`;\n};\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      helperText,\n      errorMessage,\n      size = 'medium',\n      variant = 'outlined',\n      state = 'default',\n      iconLeft,\n      iconRight,\n      className = '',\n      containerClassName = '',\n      disabled,\n      readOnly,\n      id,\n      type = 'text',\n      ...props\n    },\n    ref\n  ) => {\n    // State for password visibility toggle\n    const [showPassword, setShowPassword] = useState(false);\n    const isPasswordType = type === 'password';\n    const actualType = isPasswordType && showPassword ? 'text' : type;\n    const actualState = getActualState(disabled, readOnly, errorMessage, state);\n\n    // Get classes from lookup tables\n    const sizeClasses = SIZE_CLASSES[size];\n    const combinedClasses = useMemo(\n      () => getCombinedClasses(actualState, variant),\n      [actualState, variant]\n    );\n    const iconSize = getIconSize(size);\n\n    const baseClasses = `bg-background w-full py-2 ${\n      actualState === 'read-only' ? 'px-0' : 'px-3'\n    } font-normal text-text-900 focus:outline-primary-950`;\n\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `input-${generatedId}`;\n\n    // Handle password visibility toggle\n    const togglePasswordVisibility = () => setShowPassword(!showPassword);\n\n    // Get password toggle configuration\n    const { shouldShowPasswordToggle, actualIconRight, ariaLabel } =\n      getPasswordToggleConfig(\n        type,\n        disabled,\n        readOnly,\n        showPassword,\n        iconRight\n      );\n\n    return (\n      <div className={`${containerClassName}`}>\n        {/* Label */}\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={`block font-bold text-text-900 mb-1.5 ${sizeClasses}`}\n          >\n            {label}\n          </label>\n        )}\n\n        {/* Input Container */}\n        <div className=\"relative\">\n          {/* Left Icon */}\n          {iconLeft && (\n            <div className=\"absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none\">\n              <span\n                className={`${iconSize} text-text-400 flex items-center justify-center`}\n              >\n                {iconLeft}\n              </span>\n            </div>\n          )}\n\n          {/* Input Field */}\n          <input\n            ref={ref}\n            id={inputId}\n            type={actualType}\n            className={`${baseClasses} ${sizeClasses} ${combinedClasses} ${\n              iconLeft ? 'pl-10' : ''\n            } ${actualIconRight ? 'pr-10' : ''} ${className}`}\n            disabled={disabled}\n            readOnly={readOnly}\n            aria-invalid={actualState === 'error' ? 'true' : undefined}\n            {...props}\n          />\n\n          {/* Right Icon */}\n          {actualIconRight &&\n            (shouldShowPasswordToggle ? (\n              <button\n                type=\"button\"\n                className=\"absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0\"\n                onClick={togglePasswordVisibility}\n                aria-label={ariaLabel}\n              >\n                <span\n                  className={`${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`}\n                >\n                  {actualIconRight}\n                </span>\n              </button>\n            ) : (\n              <div className=\"absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none\">\n                <span\n                  className={`${iconSize} text-text-400 flex items-center justify-center`}\n                >\n                  {actualIconRight}\n                </span>\n              </div>\n            ))}\n        </div>\n\n        {/* Helper Text or Error Message */}\n        <div className=\"mt-1.5 gap-1.5\">\n          {helperText && <p className=\"text-sm text-text-500\">{helperText}</p>}\n          {errorMessage && (\n            <p className=\"flex gap-1 items-center text-sm text-indicator-error\">\n              <WarningCircle size={16} /> {errorMessage}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default Input;\n"],"mappings":"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","names":[]}

package/dist/Menu/index.d.mts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { StoreApi } from 'zustand';
+
+type MenuVariant = 'menu' | 'menu2' | 'breadcrumb';
+interface MenuStore {
+    value: string;
+    setValue: (value: string) => void;
+    onValueChange?: (value: string) => void;
+}
+type MenuStoreApi = StoreApi<MenuStore>;
+declare const useMenuStore: (externalStore?: MenuStoreApi) => MenuStoreApi;
+interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    defaultValue: string;
+    value?: string;
+    variant?: MenuVariant;
+    onValueChange?: (value: string) => void;
+}
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLDivElement>>;
+interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
+    children: ReactNode;
+    variant?: MenuVariant;
+}
+declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLUListElement>>;
+interface MenuItemProps extends HTMLAttributes<HTMLLIElement> {
+    value: string;
+    disabled?: boolean;
+    store?: MenuStoreApi;
+    variant?: MenuVariant;
+    separator?: boolean;
+}
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLLIElement>>;
+declare const MenuItemIcon: ({ className, icon, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    icon: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const internalScroll: (container: HTMLUListElement | null, direction: "left" | "right") => void;
+declare const internalCheckScroll: (container: HTMLUListElement | null, setShowLeftArrow: (v: boolean) => void, setShowRightArrow: (v: boolean) => void) => void;
+interface MenuOverflowProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    defaultValue: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+declare const MenuOverflow: ({ children, className, defaultValue, value, onValueChange, ...props }: MenuOverflowProps) => react_jsx_runtime.JSX.Element;
+
+export { Menu, MenuContent, MenuItem, MenuItemIcon, MenuOverflow, Menu as default, internalCheckScroll, internalScroll, useMenuStore };

package/dist/Menu/index.d.ts

@@ -1 +1,48 @@
-export * from '../index';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { StoreApi } from 'zustand';
+
+type MenuVariant = 'menu' | 'menu2' | 'breadcrumb';
+interface MenuStore {
+    value: string;
+    setValue: (value: string) => void;
+    onValueChange?: (value: string) => void;
+}
+type MenuStoreApi = StoreApi<MenuStore>;
+declare const useMenuStore: (externalStore?: MenuStoreApi) => MenuStoreApi;
+interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    defaultValue: string;
+    value?: string;
+    variant?: MenuVariant;
+    onValueChange?: (value: string) => void;
+}
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLDivElement>>;
+interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
+    children: ReactNode;
+    variant?: MenuVariant;
+}
+declare const MenuContent: react.ForwardRefExoticComponent<MenuContentProps & react.RefAttributes<HTMLUListElement>>;
+interface MenuItemProps extends HTMLAttributes<HTMLLIElement> {
+    value: string;
+    disabled?: boolean;
+    store?: MenuStoreApi;
+    variant?: MenuVariant;
+    separator?: boolean;
+}
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLLIElement>>;
+declare const MenuItemIcon: ({ className, icon, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    icon: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const internalScroll: (container: HTMLUListElement | null, direction: "left" | "right") => void;
+declare const internalCheckScroll: (container: HTMLUListElement | null, setShowLeftArrow: (v: boolean) => void, setShowRightArrow: (v: boolean) => void) => void;
+interface MenuOverflowProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    defaultValue: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+declare const MenuOverflow: ({ children, className, defaultValue, value, onValueChange, ...props }: MenuOverflowProps) => react_jsx_runtime.JSX.Element;
+
+export { Menu, MenuContent, MenuItem, MenuItemIcon, MenuOverflow, Menu as default, internalCheckScroll, internalScroll, useMenuStore };

package/dist/Menu/index.js

@@ -350,3 +350,4 @@ var Menu_default = Menu;
   internalScroll,
   useMenuStore
 });
+//# sourceMappingURL=index.js.map

package/dist/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Menu/Menu.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n  useState,\n} from 'react';\nimport { CaretLeft, CaretRight } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\ntype MenuVariant = 'menu' | 'menu2' | 'breadcrumb';\n\ninterface MenuStore {\n  value: string;\n  setValue: (value: string) => void;\n  onValueChange?: (value: string) => void;\n}\n\ntype MenuStoreApi = StoreApi<MenuStore>;\n\nconst createMenuStore = (\n  onValueChange?: (value: string) => void\n): MenuStoreApi =>\n  create<MenuStore>((set) => ({\n    value: '',\n    setValue: (value) => {\n      set({ value });\n      onValueChange?.(value);\n    },\n    onValueChange,\n  }));\n\nexport const useMenuStore = (externalStore?: MenuStoreApi) => {\n  if (!externalStore) throw new Error('MenuItem must be inside Menu');\n  return externalStore;\n};\n\ninterface MenuProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  defaultValue: string;\n  value?: string;\n  variant?: MenuVariant;\n  onValueChange?: (value: string) => void;\n}\n\nconst VARIANT_CLASSES = {\n  menu: 'bg-background shadow-soft-shadow-1 px-6',\n  menu2: '',\n  breadcrumb: '',\n};\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      className,\n      children,\n      defaultValue,\n      value: propValue,\n      variant = 'menu',\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    const storeRef = useRef<MenuStoreApi>(null);\n    storeRef.current ??= createMenuStore(onValueChange);\n    const store = storeRef.current;\n    const { setValue } = useStore(store, (s) => s);\n\n    useEffect(() => {\n      setValue(propValue ?? defaultValue);\n    }, [defaultValue, propValue, setValue]);\n\n    const baseClasses = 'w-full py-2 flex flex-row items-center justify-center';\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <div\n        ref={ref}\n        className={`\n          ${baseClasses}\n          ${variantClasses}\n          ${className ?? ''}\n        `}\n        {...props}\n      >\n        {injectStore(children, store)}\n      </div>\n    );\n  }\n);\nMenu.displayName = 'Menu';\n\ninterface MenuContentProps extends HTMLAttributes<HTMLUListElement> {\n  children: ReactNode;\n  variant?: MenuVariant;\n}\n\nconst MenuContent = forwardRef<HTMLUListElement, MenuContentProps>(\n  ({ className, children, variant = 'menu', ...props }, ref) => {\n    const baseClasses = 'w-full flex flex-row items-center gap-2';\n\n    const variantClasses =\n      variant === 'menu2' ? 'overflow-x-auto scroll-smooth' : '';\n\n    return (\n      <ul\n        ref={ref}\n        className={`\n          ${baseClasses}\n          ${variantClasses}\n          ${variant == 'breadcrumb' ? 'flex-wrap' : ''}\n          ${className ?? ''}\n        `}\n        style={\n          variant === 'menu2'\n            ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n            : undefined\n        }\n        {...props}\n      >\n        {children}\n      </ul>\n    );\n  }\n);\nMenuContent.displayName = 'MenuContent';\n\ninterface MenuItemProps extends HTMLAttributes<HTMLLIElement> {\n  value: string;\n  disabled?: boolean;\n  store?: MenuStoreApi;\n  variant?: MenuVariant;\n  separator?: boolean;\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      variant = 'menu',\n      separator = false,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useMenuStore(externalStore);\n    const { value: selectedValue, setValue } = useStore(store, (s) => s);\n\n    const handleClick = (\n      e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n    ) => {\n      if (!disabled) {\n        setValue(value);\n      }\n      props.onClick?.(e as MouseEvent<HTMLLIElement>);\n    };\n\n    const commonProps = {\n      role: 'menuitem',\n      'aria-disabled': disabled,\n      ref,\n      onClick: handleClick,\n      onKeyDown: (e: KeyboardEvent<HTMLLIElement>) => {\n        if (['Enter', ' '].includes(e.key)) handleClick(e);\n      },\n      tabIndex: disabled ? -1 : 0,\n      onMouseDown: (e: MouseEvent<HTMLLIElement>) => {\n        e.preventDefault();\n      },\n      ...props,\n    };\n\n    const variants: Record<string, ReactNode> = {\n      menu: (\n        <li\n          data-variant=\"menu\"\n          className={`\n            w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs\n            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? 'bg-primary-50 text-primary-950' : 'text-text-950'}\n            ${className ?? ''}\n          `}\n          {...commonProps}\n        >\n          {children}\n        </li>\n      ),\n      menu2: (\n        <li\n          data-variant=\"menu2\"\n          className={`\n            w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg\n            focus:outline-none focus:border-indicator-info focus:border-2 \n            ${selectedValue === value ? '' : 'pb-4'}\n          `}\n          {...commonProps}\n        >\n          <span\n            className={cn(\n              'flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold',\n              className\n            )}\n          >\n            {children}\n          </span>\n          {selectedValue === value && (\n            <div className=\"h-1 w-full bg-primary-950 rounded-lg\" />\n          )}\n        </li>\n      ),\n      breadcrumb: (\n        <li\n          data-variant=\"breadcrumb\"\n          className={`\n            flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? 'text-text-950' : 'text-text-600'}\n            ${className ?? ''}\n          `}\n          {...commonProps}\n        >\n          <span\n            className={cn(\n              'border-b border-text-600 hover:border-primary-600 text-inherit text-xs',\n              selectedValue === value\n                ? 'border-b-0 font-bold'\n                : 'border-b-primary-200'\n            )}\n          >\n            {children}\n          </span>\n\n          {separator && (\n            <CaretRight\n              size={16}\n              className=\"text-text-600\"\n              data-testid=\"separator\"\n            />\n          )}\n        </li>\n      ),\n    };\n\n    return variants[variant] ?? variants['menu'];\n  }\n);\nMenuItem.displayName = 'MenuItem';\n\nconst MenuItemIcon = ({\n  className,\n  icon,\n  ...props\n}: HTMLAttributes<HTMLSpanElement> & { icon: ReactNode }) => (\n  <span\n    className={cn(\n      'bg-background-500 w-[21px] h-[21px] flex items-center justify-center [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm',\n      className\n    )}\n    {...props}\n  >\n    {icon}\n  </span>\n);\n\nexport const internalScroll = (\n  container: HTMLUListElement | null,\n  direction: 'left' | 'right'\n) => {\n  if (!container) return;\n  container.scrollBy({\n    left: direction === 'left' ? -150 : 150,\n    behavior: 'smooth',\n  });\n};\n\nexport const internalCheckScroll = (\n  container: HTMLUListElement | null,\n  setShowLeftArrow: (v: boolean) => void,\n  setShowRightArrow: (v: boolean) => void\n) => {\n  if (!container) return;\n  const { scrollLeft, scrollWidth, clientWidth } = container;\n  setShowLeftArrow(scrollLeft > 0);\n  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);\n};\n\ninterface MenuOverflowProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  defaultValue: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst MenuOverflow = ({\n  children,\n  className,\n  defaultValue,\n  value,\n  onValueChange,\n  ...props\n}: MenuOverflowProps) => {\n  const containerRef = useRef<HTMLUListElement>(null);\n  const [showLeftArrow, setShowLeftArrow] = useState(false);\n  const [showRightArrow, setShowRightArrow] = useState(false);\n\n  useEffect(() => {\n    const checkScroll = () =>\n      internalCheckScroll(\n        containerRef.current,\n        setShowLeftArrow,\n        setShowRightArrow\n      );\n    checkScroll();\n    const container = containerRef.current;\n    container?.addEventListener('scroll', checkScroll);\n    window.addEventListener('resize', checkScroll);\n    return () => {\n      container?.removeEventListener('scroll', checkScroll);\n      window.removeEventListener('resize', checkScroll);\n    };\n  }, []);\n\n  return (\n    <div\n      data-testid=\"menu-overflow-wrapper\"\n      className={cn('relative w-full overflow-hidden', className)}\n    >\n      {showLeftArrow && (\n        <button\n          onClick={() => internalScroll(containerRef.current, 'left')}\n          className=\"absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer\"\n          data-testid=\"scroll-left-button\"\n        >\n          <CaretLeft size={16} />\n          <span className=\"sr-only\">Scroll left</span>\n        </button>\n      )}\n\n      <Menu\n        defaultValue={defaultValue}\n        onValueChange={onValueChange}\n        value={value}\n        variant=\"menu2\"\n        {...props}\n      >\n        <MenuContent ref={containerRef} variant=\"menu2\">\n          {children}\n        </MenuContent>\n      </Menu>\n\n      {showRightArrow && (\n        <button\n          onClick={() => internalScroll(containerRef.current, 'right')}\n          className=\"absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer\"\n          data-testid=\"scroll-right-button\"\n        >\n          <CaretRight size={16} />\n          <span className=\"sr-only\">Scroll right</span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nconst injectStore = (children: ReactNode, store: MenuStoreApi): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n    const typedChild = child as ReactElement<any>;\n    const shouldInject = typedChild.type === MenuItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\nexport default Menu;\nexport { Menu, MenuContent, MenuItem, MenuOverflow, MenuItemIcon };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}

package/dist/Menu/index.mjs

@@ -326,3 +326,4 @@ export {
   internalScroll,
   useMenuStore
 };
+//# sourceMappingURL=index.mjs.map

package/dist/Menu/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Menu/Menu.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n  useState,\n} from 'react';\nimport { CaretLeft, CaretRight } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\ntype MenuVariant = 'menu' | 'menu2' | 'breadcrumb';\n\ninterface MenuStore {\n  value: string;\n  setValue: (value: string) => void;\n  onValueChange?: (value: string) => void;\n}\n\ntype MenuStoreApi = StoreApi<MenuStore>;\n\nconst createMenuStore = (\n  onValueChange?: (value: string) => void\n): MenuStoreApi =>\n  create<MenuStore>((set) => ({\n    value: '',\n    setValue: (value) => {\n      set({ value });\n      onValueChange?.(value);\n    },\n    onValueChange,\n  }));\n\nexport const useMenuStore = (externalStore?: MenuStoreApi) => {\n  if (!externalStore) throw new Error('MenuItem must be inside Menu');\n  return externalStore;\n};\n\ninterface MenuProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  defaultValue: string;\n  value?: string;\n  variant?: MenuVariant;\n  onValueChange?: (value: string) => void;\n}\n\nconst VARIANT_CLASSES = {\n  menu: 'bg-background shadow-soft-shadow-1 px-6',\n  menu2: '',\n  breadcrumb: '',\n};\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      className,\n      children,\n      defaultValue,\n      value: propValue,\n      variant = 'menu',\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    const storeRef = useRef<MenuStoreApi>(null);\n    storeRef.current ??= createMenuStore(onValueChange);\n    const store = storeRef.current;\n    const { setValue } = useStore(store, (s) => s);\n\n    useEffect(() => {\n      setValue(propValue ?? defaultValue);\n    }, [defaultValue, propValue, setValue]);\n\n    const baseClasses = 'w-full py-2 flex flex-row items-center justify-center';\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <div\n        ref={ref}\n        className={`\n          ${baseClasses}\n          ${variantClasses}\n          ${className ?? ''}\n        `}\n        {...props}\n      >\n        {injectStore(children, store)}\n      </div>\n    );\n  }\n);\nMenu.displayName = 'Menu';\n\ninterface MenuContentProps extends HTMLAttributes<HTMLUListElement> {\n  children: ReactNode;\n  variant?: MenuVariant;\n}\n\nconst MenuContent = forwardRef<HTMLUListElement, MenuContentProps>(\n  ({ className, children, variant = 'menu', ...props }, ref) => {\n    const baseClasses = 'w-full flex flex-row items-center gap-2';\n\n    const variantClasses =\n      variant === 'menu2' ? 'overflow-x-auto scroll-smooth' : '';\n\n    return (\n      <ul\n        ref={ref}\n        className={`\n          ${baseClasses}\n          ${variantClasses}\n          ${variant == 'breadcrumb' ? 'flex-wrap' : ''}\n          ${className ?? ''}\n        `}\n        style={\n          variant === 'menu2'\n            ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n            : undefined\n        }\n        {...props}\n      >\n        {children}\n      </ul>\n    );\n  }\n);\nMenuContent.displayName = 'MenuContent';\n\ninterface MenuItemProps extends HTMLAttributes<HTMLLIElement> {\n  value: string;\n  disabled?: boolean;\n  store?: MenuStoreApi;\n  variant?: MenuVariant;\n  separator?: boolean;\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      variant = 'menu',\n      separator = false,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useMenuStore(externalStore);\n    const { value: selectedValue, setValue } = useStore(store, (s) => s);\n\n    const handleClick = (\n      e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n    ) => {\n      if (!disabled) {\n        setValue(value);\n      }\n      props.onClick?.(e as MouseEvent<HTMLLIElement>);\n    };\n\n    const commonProps = {\n      role: 'menuitem',\n      'aria-disabled': disabled,\n      ref,\n      onClick: handleClick,\n      onKeyDown: (e: KeyboardEvent<HTMLLIElement>) => {\n        if (['Enter', ' '].includes(e.key)) handleClick(e);\n      },\n      tabIndex: disabled ? -1 : 0,\n      onMouseDown: (e: MouseEvent<HTMLLIElement>) => {\n        e.preventDefault();\n      },\n      ...props,\n    };\n\n    const variants: Record<string, ReactNode> = {\n      menu: (\n        <li\n          data-variant=\"menu\"\n          className={`\n            w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs\n            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? 'bg-primary-50 text-primary-950' : 'text-text-950'}\n            ${className ?? ''}\n          `}\n          {...commonProps}\n        >\n          {children}\n        </li>\n      ),\n      menu2: (\n        <li\n          data-variant=\"menu2\"\n          className={`\n            w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg\n            focus:outline-none focus:border-indicator-info focus:border-2 \n            ${selectedValue === value ? '' : 'pb-4'}\n          `}\n          {...commonProps}\n        >\n          <span\n            className={cn(\n              'flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold',\n              className\n            )}\n          >\n            {children}\n          </span>\n          {selectedValue === value && (\n            <div className=\"h-1 w-full bg-primary-950 rounded-lg\" />\n          )}\n        </li>\n      ),\n      breadcrumb: (\n        <li\n          data-variant=\"breadcrumb\"\n          className={`\n            flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? 'text-text-950' : 'text-text-600'}\n            ${className ?? ''}\n          `}\n          {...commonProps}\n        >\n          <span\n            className={cn(\n              'border-b border-text-600 hover:border-primary-600 text-inherit text-xs',\n              selectedValue === value\n                ? 'border-b-0 font-bold'\n                : 'border-b-primary-200'\n            )}\n          >\n            {children}\n          </span>\n\n          {separator && (\n            <CaretRight\n              size={16}\n              className=\"text-text-600\"\n              data-testid=\"separator\"\n            />\n          )}\n        </li>\n      ),\n    };\n\n    return variants[variant] ?? variants['menu'];\n  }\n);\nMenuItem.displayName = 'MenuItem';\n\nconst MenuItemIcon = ({\n  className,\n  icon,\n  ...props\n}: HTMLAttributes<HTMLSpanElement> & { icon: ReactNode }) => (\n  <span\n    className={cn(\n      'bg-background-500 w-[21px] h-[21px] flex items-center justify-center [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm',\n      className\n    )}\n    {...props}\n  >\n    {icon}\n  </span>\n);\n\nexport const internalScroll = (\n  container: HTMLUListElement | null,\n  direction: 'left' | 'right'\n) => {\n  if (!container) return;\n  container.scrollBy({\n    left: direction === 'left' ? -150 : 150,\n    behavior: 'smooth',\n  });\n};\n\nexport const internalCheckScroll = (\n  container: HTMLUListElement | null,\n  setShowLeftArrow: (v: boolean) => void,\n  setShowRightArrow: (v: boolean) => void\n) => {\n  if (!container) return;\n  const { scrollLeft, scrollWidth, clientWidth } = container;\n  setShowLeftArrow(scrollLeft > 0);\n  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);\n};\n\ninterface MenuOverflowProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  defaultValue: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst MenuOverflow = ({\n  children,\n  className,\n  defaultValue,\n  value,\n  onValueChange,\n  ...props\n}: MenuOverflowProps) => {\n  const containerRef = useRef<HTMLUListElement>(null);\n  const [showLeftArrow, setShowLeftArrow] = useState(false);\n  const [showRightArrow, setShowRightArrow] = useState(false);\n\n  useEffect(() => {\n    const checkScroll = () =>\n      internalCheckScroll(\n        containerRef.current,\n        setShowLeftArrow,\n        setShowRightArrow\n      );\n    checkScroll();\n    const container = containerRef.current;\n    container?.addEventListener('scroll', checkScroll);\n    window.addEventListener('resize', checkScroll);\n    return () => {\n      container?.removeEventListener('scroll', checkScroll);\n      window.removeEventListener('resize', checkScroll);\n    };\n  }, []);\n\n  return (\n    <div\n      data-testid=\"menu-overflow-wrapper\"\n      className={cn('relative w-full overflow-hidden', className)}\n    >\n      {showLeftArrow && (\n        <button\n          onClick={() => internalScroll(containerRef.current, 'left')}\n          className=\"absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer\"\n          data-testid=\"scroll-left-button\"\n        >\n          <CaretLeft size={16} />\n          <span className=\"sr-only\">Scroll left</span>\n        </button>\n      )}\n\n      <Menu\n        defaultValue={defaultValue}\n        onValueChange={onValueChange}\n        value={value}\n        variant=\"menu2\"\n        {...props}\n      >\n        <MenuContent ref={containerRef} variant=\"menu2\">\n          {children}\n        </MenuContent>\n      </Menu>\n\n      {showRightArrow && (\n        <button\n          onClick={() => internalScroll(containerRef.current, 'right')}\n          className=\"absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer\"\n          data-testid=\"scroll-right-button\"\n        >\n          <CaretRight size={16} />\n          <span className=\"sr-only\">Scroll right</span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nconst injectStore = (children: ReactNode, store: MenuStoreApi): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n    const typedChild = child as ReactElement<any>;\n    const shouldInject = typedChild.type === MenuItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\nexport default Menu;\nexport { Menu, MenuContent, MenuItem, MenuOverflow, MenuItemIcon };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}

package/dist/Modal/index.d.mts

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * Modal component props interface
+ */
+type ModalProps = {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Function to close the modal */
+    onClose: () => void;
+    /** Modal title */
+    title: string;
+    /** Modal description/content */
+    children: ReactNode;
+    /** Size of the modal */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Additional CSS classes for the modal content */
+    className?: string;
+    /** Whether clicking the backdrop should close the modal */
+    closeOnBackdropClick?: boolean;
+    /** Whether pressing Escape should close the modal */
+    closeOnEscape?: boolean;
+    /** Footer content (typically buttons) */
+    footer?: ReactNode;
+    /** Hide the close button */
+    hideCloseButton?: boolean;
+};
+/**
+ * Modal component for Analytica Ensino platforms
+ *
+ * A flexible modal component with multiple size variants and customizable behavior.
+ *
+ * @param isOpen - Whether the modal is currently open
+ * @param onClose - Callback function called when the modal should be closed
+ * @param title - The title displayed at the top of the modal
+ * @param children - The main content of the modal
+ * @param size - The size variant (xs, sm, md, lg, xl)
+ * @param className - Additional CSS classes for the modal content
+ * @param closeOnBackdropClick - Whether clicking the backdrop closes the modal (default: true)
+ * @param closeOnEscape - Whether pressing Escape closes the modal (default: true)
+ * @param footer - Footer content, typically action buttons
+ * @param hideCloseButton - Whether to hide the X close button (default: false)
+ * @returns A modal overlay with content
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isModalOpen}
+ *   onClose={() => setIsModalOpen(false)}
+ *   title="Invite your team"
+ *   size="md"
+ *   footer={
+ *     <div className="flex gap-3">
+ *       <Button variant="outline" onClick={() => setIsModalOpen(false)}>Cancel</Button>
+ *       <Button variant="solid" onClick={handleExplore}>Explore</Button>
+ *     </div>
+ *   }
+ * >
+ *   Elevate user interactions with our versatile modals.
+ * </Modal>
+ * ```
+ */
+declare const Modal: ({ isOpen, onClose, title, children, size, className, closeOnBackdropClick, closeOnEscape, footer, hideCloseButton, }: ModalProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Modal as default };

package/dist/Modal/index.d.ts

@@ -1 +1,66 @@
-export * from '../index';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * Modal component props interface
+ */
+type ModalProps = {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Function to close the modal */
+    onClose: () => void;
+    /** Modal title */
+    title: string;
+    /** Modal description/content */
+    children: ReactNode;
+    /** Size of the modal */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Additional CSS classes for the modal content */
+    className?: string;
+    /** Whether clicking the backdrop should close the modal */
+    closeOnBackdropClick?: boolean;
+    /** Whether pressing Escape should close the modal */
+    closeOnEscape?: boolean;
+    /** Footer content (typically buttons) */
+    footer?: ReactNode;
+    /** Hide the close button */
+    hideCloseButton?: boolean;
+};
+/**
+ * Modal component for Analytica Ensino platforms
+ *
+ * A flexible modal component with multiple size variants and customizable behavior.
+ *
+ * @param isOpen - Whether the modal is currently open
+ * @param onClose - Callback function called when the modal should be closed
+ * @param title - The title displayed at the top of the modal
+ * @param children - The main content of the modal
+ * @param size - The size variant (xs, sm, md, lg, xl)
+ * @param className - Additional CSS classes for the modal content
+ * @param closeOnBackdropClick - Whether clicking the backdrop closes the modal (default: true)
+ * @param closeOnEscape - Whether pressing Escape closes the modal (default: true)
+ * @param footer - Footer content, typically action buttons
+ * @param hideCloseButton - Whether to hide the X close button (default: false)
+ * @returns A modal overlay with content
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isModalOpen}
+ *   onClose={() => setIsModalOpen(false)}
+ *   title="Invite your team"
+ *   size="md"
+ *   footer={
+ *     <div className="flex gap-3">
+ *       <Button variant="outline" onClick={() => setIsModalOpen(false)}>Cancel</Button>
+ *       <Button variant="solid" onClick={handleExplore}>Explore</Button>
+ *     </div>
+ *   }
+ * >
+ *   Elevate user interactions with our versatile modals.
+ * </Modal>
+ * ```
+ */
+declare const Modal: ({ isOpen, onClose, title, children, size, className, closeOnBackdropClick, closeOnEscape, footer, hideCloseButton, }: ModalProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Modal as default };

package/dist/Modal/index.js

@@ -124,3 +124,4 @@ var Modal = ({
   );
 };
 var Modal_default = Modal;
+//# sourceMappingURL=index.js.map

package/dist/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Modal/Modal.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { ReactNode, MouseEvent, useEffect, KeyboardEvent } from 'react';\nimport { X } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n  xs: 'max-w-[360px]',\n  sm: 'max-w-[420px]',\n  md: 'max-w-[510px]',\n  lg: 'max-w-[640px]',\n  xl: 'max-w-[970px]',\n} as const;\n\n/**\n * Modal component props interface\n */\ntype ModalProps = {\n  /** Whether the modal is open */\n  isOpen: boolean;\n  /** Function to close the modal */\n  onClose: () => void;\n  /** Modal title */\n  title: string;\n  /** Modal description/content */\n  children: ReactNode;\n  /** Size of the modal */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Additional CSS classes for the modal content */\n  className?: string;\n  /** Whether clicking the backdrop should close the modal */\n  closeOnBackdropClick?: boolean;\n  /** Whether pressing Escape should close the modal */\n  closeOnEscape?: boolean;\n  /** Footer content (typically buttons) */\n  footer?: ReactNode;\n  /** Hide the close button */\n  hideCloseButton?: boolean;\n};\n\n/**\n * Modal component for Analytica Ensino platforms\n *\n * A flexible modal component with multiple size variants and customizable behavior.\n *\n * @param isOpen - Whether the modal is currently open\n * @param onClose - Callback function called when the modal should be closed\n * @param title - The title displayed at the top of the modal\n * @param children - The main content of the modal\n * @param size - The size variant (xs, sm, md, lg, xl)\n * @param className - Additional CSS classes for the modal content\n * @param closeOnBackdropClick - Whether clicking the backdrop closes the modal (default: true)\n * @param closeOnEscape - Whether pressing Escape closes the modal (default: true)\n * @param footer - Footer content, typically action buttons\n * @param hideCloseButton - Whether to hide the X close button (default: false)\n * @returns A modal overlay with content\n *\n * @example\n * ```tsx\n * <Modal\n *   isOpen={isModalOpen}\n *   onClose={() => setIsModalOpen(false)}\n *   title=\"Invite your team\"\n *   size=\"md\"\n *   footer={\n *     <div className=\"flex gap-3\">\n *       <Button variant=\"outline\" onClick={() => setIsModalOpen(false)}>Cancel</Button>\n *       <Button variant=\"solid\" onClick={handleExplore}>Explore</Button>\n *     </div>\n *   }\n * >\n *   Elevate user interactions with our versatile modals.\n * </Modal>\n * ```\n */\nconst Modal = ({\n  isOpen,\n  onClose,\n  title,\n  children,\n  size = 'md',\n  className = '',\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  footer,\n  hideCloseButton = false,\n}: ModalProps) => {\n  // Handle escape key\n  useEffect(() => {\n    if (!isOpen || !closeOnEscape) return;\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isOpen, closeOnEscape, onClose]);\n\n  // Handle body scroll lock\n  useEffect(() => {\n    const originalOverflow = document.body.style.overflow;\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = originalOverflow;\n    }\n\n    return () => {\n      document.body.style.overflow = originalOverflow;\n    };\n  }, [isOpen]);\n\n  // Handle backdrop click\n  const handleBackdropClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (closeOnBackdropClick && event.target === event.currentTarget) {\n      onClose();\n    }\n  };\n\n  // Handle backdrop keyboard interaction\n  const handleBackdropKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (closeOnBackdropClick && (event.key === 'Enter' || event.key === ' ')) {\n      onClose();\n    }\n  };\n\n  if (!isOpen) return null;\n\n  const sizeClasses = SIZE_CLASSES[size];\n  const baseClasses =\n    'bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4';\n  // Reset dialog default styles to prevent positioning issues\n  const dialogResetClasses =\n    'p-0 m-0 border-none outline-none max-h-none static';\n  const modalClasses = cn(\n    baseClasses,\n    sizeClasses,\n    dialogResetClasses,\n    className\n  );\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs\"\n      onClick={handleBackdropClick}\n      onKeyDown={handleBackdropKeyDown}\n      role=\"button\"\n      tabIndex={closeOnBackdropClick ? 0 : -1}\n      aria-label=\"Fechar modal clicando no fundo\"\n    >\n      <dialog className={modalClasses} aria-labelledby=\"modal-title\" open>\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-6 py-6\">\n          <h2 id=\"modal-title\" className=\"text-lg font-semibold text-text-950\">\n            {title}\n          </h2>\n          {!hideCloseButton && (\n            <button\n              onClick={onClose}\n              className=\"p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2\"\n              aria-label=\"Fechar modal\"\n            >\n              <X size={18} />\n            </button>\n          )}\n        </div>\n\n        {/* Content */}\n        <div className=\"px-6 pb-6\">\n          <div className=\"text-text-500 font-normal text-sm leading-6\">\n            {children}\n          </div>\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <div className=\"flex justify-end gap-3 px-6 pb-6\">{footer}</div>\n        )}\n      </dialog>\n    </div>\n  );\n};\n\nexport default Modal;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgE;AAChE,4BAAkB;;;ACDlB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADuJQ;AArJR,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA+DA,IAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB;AAAA,EACA,kBAAkB;AACpB,MAAkB;AAEhB,8BAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,cAAe;AAE/B,UAAM,eAAe,CAAC,UAAoC;AACxD,UAAI,MAAM,QAAQ,UAAU;AAC1B,gBAAQ;AAAA,MACV;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,YAAY;AACjD,WAAO,MAAM,SAAS,oBAAoB,WAAW,YAAY;AAAA,EACnE,GAAG,CAAC,QAAQ,eAAe,OAAO,CAAC;AAGnC,8BAAU,MAAM;AACd,UAAM,mBAAmB,SAAS,KAAK,MAAM;AAC7C,QAAI,QAAQ;AACV,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,OAAO;AACL,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAEA,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,sBAAsB,CAAC,UAAsC;AACjE,QAAI,wBAAwB,MAAM,WAAW,MAAM,eAAe;AAChE,cAAQ;AAAA,IACV;AAAA,EACF;AAGA,QAAM,wBAAwB,CAAC,UAAyC;AACtE,QAAI,yBAAyB,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACxE,cAAQ;AAAA,IACV;AAAA,EACF;AAEA,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,cAAc,aAAa,IAAI;AACrC,QAAM,cACJ;AAEF,QAAM,qBACJ;AACF,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU,uBAAuB,IAAI;AAAA,MACrC,cAAW;AAAA,MAEX,uDAAC,YAAO,WAAW,cAAc,mBAAgB,eAAc,MAAI,MAEjE;AAAA,qDAAC,SAAI,WAAU,+CACb;AAAA,sDAAC,QAAG,IAAG,eAAc,WAAU,uCAC5B,iBACH;AAAA,UACC,CAAC,mBACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cACV,cAAW;AAAA,cAEX,sDAAC,2BAAE,MAAM,IAAI;AAAA;AAAA,UACf;AAAA,WAEJ;AAAA,QAGA,4CAAC,SAAI,WAAU,aACb,sDAAC,SAAI,WAAU,+CACZ,UACH,GACF;AAAA,QAGC,UACC,4CAAC,SAAI,WAAU,oCAAoC,kBAAO;AAAA,SAE9D;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/Modal/index.mjs

@@ -103,3 +103,4 @@ var Modal_default = Modal;
 export {
   Modal_default as default
 };
+//# sourceMappingURL=index.mjs.map