analytica-frontend-lib 1.0.70 → 1.0.72

package/dist/AlertDialog/index.mjs

@@ -0,0 +1,212 @@
+// src/components/AlertDialog/AlertDialog.tsx
+import {
+  forwardRef,
+  useState,
+  useEffect
+} from "react";
+
+// src/components/Button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var VARIANT_ACTION_CLASSES = {
+  solid: {
+    primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
+  },
+  outline: {
+    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
+  },
+  link: {
+    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
+  }
+};
+var SIZE_CLASSES = {
+  "extra-small": "text-xs px-3.5 py-2",
+  small: "text-sm px-4 py-2.5",
+  medium: "text-md px-5 py-2.5",
+  large: "text-lg px-6 py-3",
+  "extra-large": "text-lg px-7 py-3.5"
+};
+var Button = ({
+  children,
+  iconLeft,
+  iconRight,
+  size = "medium",
+  variant = "solid",
+  action = "primary",
+  className = "",
+  disabled,
+  type = "button",
+  ...props
+}) => {
+  const sizeClasses = SIZE_CLASSES[size];
+  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
+  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      disabled,
+      type,
+      ...props,
+      children: [
+        iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/components/AlertDialog/AlertDialog.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SIZE_CLASSES2 = {
+  "extra-small": "w-screen max-w-[324px]",
+  small: "w-screen max-w-[378px]",
+  medium: "w-screen max-w-[459px]",
+  large: "w-screen max-w-[578px]",
+  "extra-large": "w-screen max-w-[912px]"
+};
+var AlertDialog = forwardRef(
+  ({
+    trigger,
+    description,
+    cancelButtonLabel = "Cancelar",
+    submitButtonLabel = "Deletar",
+    title,
+    isOpen: controlledIsOpen,
+    onOpen,
+    onClose,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    className = "",
+    onSubmit,
+    submitValue,
+    onCancel,
+    cancelValue,
+    size = "medium",
+    ...props
+  }, ref) => {
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const isOpen = controlledIsOpen ?? internalIsOpen;
+    const setIsOpen = (open) => {
+      if (controlledIsOpen === void 0) {
+        setInternalIsOpen(open);
+      }
+      if (open && onOpen) onOpen();
+      if (!open && onClose) onClose();
+    };
+    useEffect(() => {
+      if (!isOpen || !closeOnEscape) return;
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, closeOnEscape]);
+    useEffect(() => {
+      if (isOpen) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "unset";
+      }
+      return () => {
+        document.body.style.overflow = "unset";
+      };
+    }, [isOpen]);
+    const handleBackdropClick = (event) => {
+      if (event.target === event.currentTarget && closeOnBackdropClick) {
+        setIsOpen(false);
+      }
+    };
+    const handleBackdropKeyDown = (event) => {
+      if (event.key === "Escape" && closeOnEscape) {
+        setIsOpen(false);
+      }
+    };
+    const handleTriggerClick = () => {
+      setIsOpen(true);
+    };
+    const handleSubmit = () => {
+      setIsOpen(false);
+      onSubmit?.(submitValue);
+    };
+    const handleCancel = () => {
+      setIsOpen(false);
+      onCancel?.(cancelValue);
+    };
+    const sizeClasses = SIZE_CLASSES2[size];
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: handleTriggerClick,
+          "aria-label": "Open dialog",
+          type: "button",
+          className: "border-none bg-transparent p-0 cursor-pointer",
+          children: trigger
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm",
+          onClick: handleBackdropClick,
+          onKeyDown: handleBackdropKeyDown,
+          "data-testid": "alert-dialog-overlay",
+          children: /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              ref,
+              className: `bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3 ${sizeClasses} ${className}`,
+              ...props,
+              children: [
+                /* @__PURE__ */ jsx2(
+                  "h2",
+                  {
+                    id: "alert-dialog-title",
+                    className: "pb-3 text-xl font-semibold",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "p",
+                  {
+                    id: "alert-dialog-description",
+                    className: "text-text-700 text-sm",
+                    children: description
+                  }
+                ),
+                /* @__PURE__ */ jsxs2("div", { className: "flex flex-row items-center justify-end pt-4 gap-3", children: [
+                  /* @__PURE__ */ jsx2(Button_default, { variant: "outline", size: "small", onClick: handleCancel, children: cancelButtonLabel }),
+                  /* @__PURE__ */ jsx2(
+                    Button_default,
+                    {
+                      variant: "solid",
+                      size: "small",
+                      action: "negative",
+                      onClick: handleSubmit,
+                      children: submitButtonLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+AlertDialog.displayName = "AlertDialog";
+export {
+  AlertDialog
+};
+//# sourceMappingURL=index.mjs.map

package/dist/AlertDialog/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AlertDialog/AlertDialog.tsx","../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useState,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent,\n} from 'react';\nimport Button from '../Button/Button';\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n  'extra-small': 'w-screen max-w-[324px]',\n  small: 'w-screen max-w-[378px]',\n  medium: 'w-screen max-w-[459px]',\n  large: 'w-screen max-w-[578px]',\n  'extra-large': 'w-screen max-w-[912px]',\n} as const;\n\ninterface AlertDialogProps extends HTMLAttributes<HTMLDivElement> {\n  /** Trigger element that opens the alert dialog */\n  trigger: ReactNode;\n  /** Title of the alert dialog */\n  title: string;\n  /** Whether the alert dialog is open (controlled mode) */\n  isOpen?: boolean;\n  /** Function called when the alert dialog should be opened (controlled mode) */\n  onOpen?: () => void;\n  /** Function called when the alert dialog should be closed (controlled mode) */\n  onClose?: () => void;\n  /** Whether clicking the backdrop should close the alert dialog */\n  closeOnBackdropClick?: boolean;\n  /** Whether pressing Escape should close the alert dialog */\n  closeOnEscape?: boolean;\n  /** Additional CSS classes for the alert dialog content */\n  className?: string;\n  /** Function called when submit button is clicked */\n  onSubmit?: (value?: unknown) => void;\n  /** Value to pass to onSubmit function */\n  submitValue?: unknown;\n  /** Function called when cancel button is clicked */\n  onCancel?: (value?: unknown) => void;\n  /** Value to pass to onCancel function */\n  cancelValue?: unknown;\n  /** Description of the alert dialog */\n  description: string;\n  /** Label of the cancel button */\n  cancelButtonLabel?: string;\n  /** Label of the submit button */\n  submitButtonLabel?: string;\n  /** Size of the alert dialog */\n  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n}\n\nconst AlertDialog = forwardRef<HTMLDivElement, AlertDialogProps>(\n  (\n    {\n      trigger,\n      description,\n      cancelButtonLabel = 'Cancelar',\n      submitButtonLabel = 'Deletar',\n      title,\n      isOpen: controlledIsOpen,\n      onOpen,\n      onClose,\n      closeOnBackdropClick = true,\n      closeOnEscape = true,\n      className = '',\n      onSubmit,\n      submitValue,\n      onCancel,\n      cancelValue,\n      size = 'medium',\n      ...props\n    },\n    ref\n  ) => {\n    // Internal state for uncontrolled mode\n    const [internalIsOpen, setInternalIsOpen] = useState(false);\n\n    // Use controlled or uncontrolled state\n    const isOpen = controlledIsOpen ?? internalIsOpen;\n    const setIsOpen = (open: boolean) => {\n      if (controlledIsOpen === undefined) {\n        setInternalIsOpen(open);\n      }\n      if (open && onOpen) onOpen();\n      if (!open && onClose) onClose();\n    };\n\n    // Handle escape key\n    useEffect(() => {\n      if (!isOpen || !closeOnEscape) return;\n\n      const handleEscape = (event: globalThis.KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          setIsOpen(false);\n        }\n      };\n\n      document.addEventListener('keydown', handleEscape);\n      return () => document.removeEventListener('keydown', handleEscape);\n    }, [isOpen, closeOnEscape]);\n\n    // Prevent body scroll when modal is open\n    useEffect(() => {\n      if (isOpen) {\n        document.body.style.overflow = 'hidden';\n      } else {\n        document.body.style.overflow = 'unset';\n      }\n\n      return () => {\n        document.body.style.overflow = 'unset';\n      };\n    }, [isOpen]);\n\n    const handleBackdropClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (event.target === event.currentTarget && closeOnBackdropClick) {\n        setIsOpen(false);\n      }\n    };\n\n    const handleBackdropKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape' && closeOnEscape) {\n        setIsOpen(false);\n      }\n    };\n\n    const handleTriggerClick = () => {\n      setIsOpen(true);\n    };\n\n    const handleSubmit = () => {\n      setIsOpen(false);\n      onSubmit?.(submitValue);\n    };\n\n    const handleCancel = () => {\n      setIsOpen(false);\n      onCancel?.(cancelValue);\n    };\n\n    const sizeClasses = SIZE_CLASSES[size];\n\n    return (\n      <>\n        {/* Trigger */}\n        <button\n          onClick={handleTriggerClick}\n          aria-label=\"Open dialog\"\n          type=\"button\"\n          className=\"border-none bg-transparent p-0 cursor-pointer\"\n        >\n          {trigger}\n        </button>\n\n        {/* Alert Dialog Overlay */}\n        {isOpen && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm\"\n            onClick={handleBackdropClick}\n            onKeyDown={handleBackdropKeyDown}\n            data-testid=\"alert-dialog-overlay\"\n          >\n            {/* Alert Dialog Content */}\n            <div\n              ref={ref}\n              className={`bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3 ${sizeClasses} ${className}`}\n              {...props}\n            >\n              <h2\n                id=\"alert-dialog-title\"\n                className=\"pb-3 text-xl font-semibold\"\n              >\n                {title}\n              </h2>\n              <p\n                id=\"alert-dialog-description\"\n                className=\"text-text-700 text-sm\"\n              >\n                {description}\n              </p>\n\n              <div className=\"flex flex-row items-center justify-end pt-4 gap-3\">\n                <Button variant=\"outline\" size=\"small\" onClick={handleCancel}>\n                  {cancelButtonLabel}\n                </Button>\n\n                <Button\n                  variant=\"solid\"\n                  size=\"small\"\n                  action=\"negative\"\n                  onClick={handleSubmit}\n                >\n                  {submitButtonLabel}\n                </Button>\n              </div>\n            </div>\n          </div>\n        )}\n      </>\n    );\n  }\n);\n\nAlertDialog.displayName = 'AlertDialog';\n\nexport { AlertDialog };\n","import { ButtonHTMLAttributes, ReactNode } from 'react';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n  solid: {\n    primary:\n      'bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed',\n    positive:\n      'bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed',\n    negative:\n      'bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed',\n  },\n  outline: {\n    primary:\n      'bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed',\n    positive:\n      'bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed',\n    negative:\n      'bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed',\n  },\n  link: {\n    primary:\n      'bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed',\n    positive:\n      'bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed',\n    negative:\n      'bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed',\n  },\n} as const;\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n  'extra-small': 'text-xs px-3.5 py-2',\n  small: 'text-sm px-4 py-2.5',\n  medium: 'text-md px-5 py-2.5',\n  large: 'text-lg px-6 py-3',\n  'extra-large': 'text-lg px-7 py-3.5',\n} as const;\n\n/**\n * Button component props interface\n */\ntype ButtonProps = {\n  /** Content to be displayed inside the button */\n  children: ReactNode;\n  /** Ícone à esquerda do texto */\n  iconLeft?: ReactNode;\n  /** Ícone à direita do texto */\n  iconRight?: ReactNode;\n  /** Size of the button */\n  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n  /** Visual variant of the button */\n  variant?: 'solid' | 'outline' | 'link';\n  /** Action type of the button */\n  action?: 'primary' | 'positive' | 'negative';\n  /** Additional CSS classes to apply */\n  className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Button component for Analytica Ensino platforms\n *\n * A flexible button component with multiple variants, sizes and actions.\n *\n * @param children - The content to display inside the button\n * @param size - The size variant (extra-small, small, medium, large, extra-large)\n * @param variant - The visual style variant (solid, outline, link)\n * @param action - The action type (primary, positive, negative)\n * @param className - Additional CSS classes\n * @param props - All other standard button HTML attributes\n * @returns A styled button element\n *\n * @example\n * ```tsx\n * <Button variant=\"solid\" action=\"primary\" size=\"medium\" onClick={() => console.log('clicked')}>\n *   Click me\n * </Button>\n * ```\n */\nconst Button = ({\n  children,\n  iconLeft,\n  iconRight,\n  size = 'medium',\n  variant = 'solid',\n  action = 'primary',\n  className = '',\n  disabled,\n  type = 'button',\n  ...props\n}: ButtonProps) => {\n  // Get classes from lookup tables\n  const sizeClasses = SIZE_CLASSES[size];\n  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n  const baseClasses =\n    'inline-flex items-center justify-center rounded-full cursor-pointer font-medium';\n\n  return (\n    <button\n      className={`${baseClasses} ${variantClasses} ${sizeClasses} ${className}`}\n      disabled={disabled}\n      type={type}\n      {...props}\n    >\n      {iconLeft && <span className=\"mr-2 flex items-center\">{iconLeft}</span>}\n      {children}\n      {iconRight && <span className=\"ml-2 flex items-center\">{iconRight}</span>}\n    </button>\n  );\n};\n\nexport default Button;\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OAGK;;;AC+FH,SAMe,KANf;AAlGJ,IAAM,yBAAyB;AAAA,EAC7B,OAAO;AAAA,IACL,SACE;AAAA,IACF,UACE;AAAA,IACF,UACE;AAAA,EACJ;AAAA,EACA,SAAS;AAAA,IACP,SACE;AAAA,IACF,UACE;AAAA,IACF,UACE;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACJ,SACE;AAAA,IACF,UACE;AAAA,IACF,UACE;AAAA,EACJ;AACF;AAKA,IAAM,eAAe;AAAA,EACnB,eAAe;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,eAAe;AACjB;AA0CA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAmB;AAEjB,QAAM,cAAc,aAAa,IAAI;AACrC,QAAM,iBAAiB,uBAAuB,OAAO,EAAE,MAAM;AAE7D,QAAM,cACJ;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,WAAW,IAAI,cAAc,IAAI,WAAW,IAAI,SAAS;AAAA,MACvE;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,oBAAY,oBAAC,UAAK,WAAU,0BAA0B,oBAAS;AAAA,QAC/D;AAAA,QACA,aAAa,oBAAC,UAAK,WAAU,0BAA0B,qBAAU;AAAA;AAAA;AAAA,EACpE;AAEJ;AAEA,IAAO,iBAAQ;;;ADiCT,mBAEE,OAAAA,MAoCM,QAAAC,aAtCR;AAvIN,IAAMC,gBAAe;AAAA,EACnB,eAAe;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,eAAe;AACjB;AAqCA,IAAM,cAAc;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,QACG;AAEH,UAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAG1D,UAAM,SAAS,oBAAoB;AACnC,UAAM,YAAY,CAAC,SAAkB;AACnC,UAAI,qBAAqB,QAAW;AAClC,0BAAkB,IAAI;AAAA,MACxB;AACA,UAAI,QAAQ,OAAQ,QAAO;AAC3B,UAAI,CAAC,QAAQ,QAAS,SAAQ;AAAA,IAChC;AAGA,cAAU,MAAM;AACd,UAAI,CAAC,UAAU,CAAC,cAAe;AAE/B,YAAM,eAAe,CAAC,UAAoC;AACxD,YAAI,MAAM,QAAQ,UAAU;AAC1B,oBAAU,KAAK;AAAA,QACjB;AAAA,MACF;AAEA,eAAS,iBAAiB,WAAW,YAAY;AACjD,aAAO,MAAM,SAAS,oBAAoB,WAAW,YAAY;AAAA,IACnE,GAAG,CAAC,QAAQ,aAAa,CAAC;AAG1B,cAAU,MAAM;AACd,UAAI,QAAQ;AACV,iBAAS,KAAK,MAAM,WAAW;AAAA,MACjC,OAAO;AACL,iBAAS,KAAK,MAAM,WAAW;AAAA,MACjC;AAEA,aAAO,MAAM;AACX,iBAAS,KAAK,MAAM,WAAW;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,MAAM,CAAC;AAEX,UAAM,sBAAsB,CAAC,UAAsC;AACjE,UAAI,MAAM,WAAW,MAAM,iBAAiB,sBAAsB;AAChE,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAEA,UAAM,wBAAwB,CAAC,UAAyC;AACtE,UAAI,MAAM,QAAQ,YAAY,eAAe;AAC3C,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAEA,UAAM,qBAAqB,MAAM;AAC/B,gBAAU,IAAI;AAAA,IAChB;AAEA,UAAM,eAAe,MAAM;AACzB,gBAAU,KAAK;AACf,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACzB,gBAAU,KAAK;AACf,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,cAAcA,cAAa,IAAI;AAErC,WACE,gBAAAD,MAAA,YAEE;AAAA,sBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,cAAW;AAAA,UACX,MAAK;AAAA,UACL,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAGC,UACC,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,eAAY;AAAA,UAGZ,0BAAAC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW,uEAAuE,WAAW,IAAI,SAAS;AAAA,cACzG,GAAG;AAAA,cAEJ;AAAA,gCAAAD;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,WAAU;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,gBACA,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,WAAU;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,gBAEA,gBAAAC,MAAC,SAAI,WAAU,qDACb;AAAA,kCAAAD,KAAC,kBAAO,SAAQ,WAAU,MAAK,SAAQ,SAAS,cAC7C,6BACH;AAAA,kBAEA,gBAAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,SAAQ;AAAA,sBACR,MAAK;AAAA,sBACL,QAAO;AAAA,sBACP,SAAS;AAAA,sBAER;AAAA;AAAA,kBACH;AAAA,mBACF;AAAA;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":["jsx","jsxs","SIZE_CLASSES"]}

package/dist/Alternative/index.d.mts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Interface para definir uma alternativa
+ */
+interface Alternative {
+    value: string;
+    label: string;
+    status?: 'correct' | 'incorrect' | 'neutral';
+    disabled?: boolean;
+    description?: string;
+}
+/**
+ * Props do componente AlternativesList
+ */
+interface AlternativesListProps {
+    /** Lista de alternativas */
+    alternatives: Alternative[];
+    /** Nome do grupo de radio */
+    name?: string;
+    /** Valor selecionado por padrão */
+    defaultValue?: string;
+    /** Valor controlado */
+    value?: string;
+    /** Callback quando uma alternativa é selecionada */
+    onValueChange?: (value: string) => void;
+    /** Se o componente está desabilitado */
+    disabled?: boolean;
+    /** Layout das alternativas */
+    layout?: 'default' | 'compact' | 'detailed';
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Modo de exibição: interativo (com radios funcionais) ou readonly (apenas visual) */
+    mode?: 'interactive' | 'readonly';
+    /** Valor selecionado pelo usuário (apenas para modo readonly) */
+    selectedValue?: string;
+}
+/**
+ * Componente reutilizável para exibir lista de alternativas com RadioGroup
+ *
+ * Suporta dois modos:
+ * - `interactive`: Permite interação com radios (padrão)
+ * - `readonly`: Apenas exibição visual dos estados
+ *
+ * @example
+ * ```tsx
+ * // Modo interativo (padrão)
+ * <AlternativesList
+ *   mode="interactive"
+ *   alternatives={[
+ *     { value: "a", label: "Alternativa A", status: "correct" },
+ *     { value: "b", label: "Alternativa B", status: "incorrect" },
+ *     { value: "c", label: "Alternativa C" }
+ *   ]}
+ *   defaultValue="a"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ *
+ * // Modo readonly - mostra seleção do usuário
+ * <AlternativesList
+ *   mode="readonly"
+ *   selectedValue="b"  // O que o usuário selecionou
+ *   alternatives={[
+ *     { value: "a", label: "Resposta A", status: "correct" },  // Mostra como correta
+ *     { value: "b", label: "Resposta B" },  // Mostra radio selecionado + badge incorreto
+ *     { value: "c", label: "Resposta C" }
+ *   ]}
+ * />
+ * ```
+ */
+declare const AlternativesList: ({ alternatives, name, defaultValue, value, onValueChange, disabled, layout, className, mode, selectedValue, }: AlternativesListProps) => react_jsx_runtime.JSX.Element;
+interface HeaderAlternativeProps extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    subTitle: string;
+    content: string;
+}
+declare const HeaderAlternative: react.ForwardRefExoticComponent<HeaderAlternativeProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type Alternative, AlternativesList, type AlternativesListProps, HeaderAlternative };

package/dist/Alternative/index.d.ts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Interface para definir uma alternativa
+ */
+interface Alternative {
+    value: string;
+    label: string;
+    status?: 'correct' | 'incorrect' | 'neutral';
+    disabled?: boolean;
+    description?: string;
+}
+/**
+ * Props do componente AlternativesList
+ */
+interface AlternativesListProps {
+    /** Lista de alternativas */
+    alternatives: Alternative[];
+    /** Nome do grupo de radio */
+    name?: string;
+    /** Valor selecionado por padrão */
+    defaultValue?: string;
+    /** Valor controlado */
+    value?: string;
+    /** Callback quando uma alternativa é selecionada */
+    onValueChange?: (value: string) => void;
+    /** Se o componente está desabilitado */
+    disabled?: boolean;
+    /** Layout das alternativas */
+    layout?: 'default' | 'compact' | 'detailed';
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Modo de exibição: interativo (com radios funcionais) ou readonly (apenas visual) */
+    mode?: 'interactive' | 'readonly';
+    /** Valor selecionado pelo usuário (apenas para modo readonly) */
+    selectedValue?: string;
+}
+/**
+ * Componente reutilizável para exibir lista de alternativas com RadioGroup
+ *
+ * Suporta dois modos:
+ * - `interactive`: Permite interação com radios (padrão)
+ * - `readonly`: Apenas exibição visual dos estados
+ *
+ * @example
+ * ```tsx
+ * // Modo interativo (padrão)
+ * <AlternativesList
+ *   mode="interactive"
+ *   alternatives={[
+ *     { value: "a", label: "Alternativa A", status: "correct" },
+ *     { value: "b", label: "Alternativa B", status: "incorrect" },
+ *     { value: "c", label: "Alternativa C" }
+ *   ]}
+ *   defaultValue="a"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ *
+ * // Modo readonly - mostra seleção do usuário
+ * <AlternativesList
+ *   mode="readonly"
+ *   selectedValue="b"  // O que o usuário selecionou
+ *   alternatives={[
+ *     { value: "a", label: "Resposta A", status: "correct" },  // Mostra como correta
+ *     { value: "b", label: "Resposta B" },  // Mostra radio selecionado + badge incorreto
+ *     { value: "c", label: "Resposta C" }
+ *   ]}
+ * />
+ * ```
+ */
+declare const AlternativesList: ({ alternatives, name, defaultValue, value, onValueChange, disabled, layout, className, mode, selectedValue, }: AlternativesListProps) => react_jsx_runtime.JSX.Element;
+interface HeaderAlternativeProps extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    subTitle: string;
+    content: string;
+}
+declare const HeaderAlternative: react.ForwardRefExoticComponent<HeaderAlternativeProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type Alternative, AlternativesList, type AlternativesListProps, HeaderAlternative };