analytica-frontend-lib 1.1.96 → 1.1.97

package/dist/CheckBox/index.d.mts

@@ -69,6 +69,6 @@ declare const CheckBox: react.ForwardRefExoticComponent<{
     className?: string;
     /** Label CSS classes */
     labelClassName?: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
 export { type CheckBoxProps, CheckBox as default };

package/dist/CheckBox/index.d.ts

@@ -69,6 +69,6 @@ declare const CheckBox: react.ForwardRefExoticComponent<{
     className?: string;
     /** Label CSS classes */
     labelClassName?: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
 export { type CheckBoxProps, CheckBox as default };

package/dist/Input/index.js

@@ -94,6 +94,7 @@ var Input = (0, import_react.forwardRef)(
     containerClassName = "",
     disabled,
     readOnly,
+    required,
     id,
     type = "text",
     ...props
@@ -120,12 +121,16 @@ var Input = (0, import_react.forwardRef)(
       iconRight
     );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${containerClassName}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "label",
         {
           htmlFor: inputId,
           className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
-          children: label
+          children: [
+            label,
+            " ",
+            required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-indicator-error", children: "*" })
+          ]
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
@@ -145,6 +150,7 @@ var Input = (0, import_react.forwardRef)(
             className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
             disabled,
             readOnly,
+            required,
             "aria-invalid": actualState === "error" ? "true" : void 0,
             ...props
           }

package/dist/Input/index.js.map

@@ -1 +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":[]}
+{"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      required,\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            {required && <span className=\"text-indicator-error\">*</span>}\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            required={required}\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

@@ -75,6 +75,7 @@ var Input = forwardRef(
     containerClassName = "",
     disabled,
     readOnly,
+    required,
     id,
     type = "text",
     ...props
@@ -101,12 +102,16 @@ var Input = forwardRef(
       iconRight
     );
     return /* @__PURE__ */ jsxs("div", { className: `${containerClassName}`, children: [
-      label && /* @__PURE__ */ jsx(
+      label && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: inputId,
           className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
-          children: label
+          children: [
+            label,
+            " ",
+            required && /* @__PURE__ */ jsx("span", { className: "text-indicator-error", children: "*" })
+          ]
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -126,6 +131,7 @@ var Input = forwardRef(
             className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
             disabled,
             readOnly,
+            required,
             "aria-invalid": actualState === "error" ? "true" : void 0,
             ...props
           }

package/dist/Input/index.mjs.map

@@ -1 +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":[]}
+{"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      required,\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            {required && <span className=\"text-indicator-error\">*</span>}\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            required={required}\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/Quiz/index.js

@@ -2289,6 +2289,7 @@ var TextArea = (0, import_react7.forwardRef)(
     id,
     onChange,
     placeholder,
+    required,
     ...props
   }, ref) => {
     const generatedId = (0, import_react7.useId)();
@@ -2320,7 +2321,7 @@ var TextArea = (0, import_react7.forwardRef)(
       className
     );
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         Text_default,
         {
           as: "label",
@@ -2329,7 +2330,11 @@ var TextArea = (0, import_react7.forwardRef)(
           weight: "medium",
           color: "text-text-950",
           className: cn("mb-1.5", labelClassName),
-          children: label
+          children: [
+            label,
+            " ",
+            required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-indicator-error", children: "*" })
+          ]
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -2343,6 +2348,7 @@ var TextArea = (0, import_react7.forwardRef)(
           onBlur: handleBlur,
           className: textareaClasses,
           placeholder,
+          required,
           ...props
         }
       ),