analytica-frontend-lib 1.0.22 → 1.0.23

package/dist/DropdownMenu/DropdownMenu.mjs

@@ -0,0 +1,242 @@
+"use client";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+import {
+  createContext,
+  useState,
+  useCallback,
+  useContext,
+  forwardRef,
+  useEffect,
+  useRef,
+  useMemo
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownMenuContext = createContext(
+  void 0
+);
+var DropdownMenu = ({ children, open, onOpenChange }) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = open !== void 0;
+  const currentOpen = isControlled ? open : internalOpen;
+  const setOpen = useCallback(
+    (newOpen) => {
+      if (onOpenChange) onOpenChange(newOpen);
+      if (!isControlled) setInternalOpen(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  const menuRef = useRef(null);
+  const handleArrowDownOrArrowUp = (event) => {
+    const menuContent = menuRef.current?.querySelector('[role="menu"]');
+    if (menuContent) {
+      event.preventDefault();
+      const items = Array.from(
+        menuContent.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        )
+      ).filter((el) => el instanceof HTMLElement);
+      if (items.length === 0) return;
+      const focusedItem = document.activeElement;
+      const currentIndex = items.findIndex((item) => item === focusedItem);
+      let nextIndex;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+      } else {
+        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+      }
+      items[nextIndex]?.focus();
+    }
+  };
+  const handleDownkey = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      handleArrowDownOrArrowUp(event);
+    }
+  };
+  const handleClickOutside = (event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+  useEffect(() => {
+    if (currentOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleDownkey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleDownkey);
+    };
+  }, [currentOpen]);
+  const value = useMemo(
+    () => ({ open: currentOpen, setOpen }),
+    [currentOpen, setOpen]
+  );
+  return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: "relative", ref: menuRef, children }) });
+};
+var DropdownMenuTrigger = forwardRef(({ className, children, onClick, ...props }, ref) => {
+  const context = useContext(DropdownMenuContext);
+  if (!context)
+    throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
+  const { open, setOpen } = context;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        setOpen(!open);
+        if (onClick) onClick(e);
+      },
+      "aria-expanded": open,
+      ...props,
+      children
+    }
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var ITEM_SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md"
+};
+var SIDE_CLASSES = {
+  top: "bottom-full",
+  right: "top-full",
+  bottom: "top-full",
+  left: "top-full"
+};
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+var MenuLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  "fieldset",
+  {
+    ref,
+    role: "group",
+    className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
+    ...props
+  }
+));
+MenuLabel.displayName = "MenuLabel";
+var MenuContent = forwardRef(
+  ({
+    className,
+    align = "start",
+    side = "bottom",
+    sideOffset = 4,
+    children,
+    ...props
+  }, ref) => {
+    const { open } = useContext(DropdownMenuContext);
+    const [isVisible, setIsVisible] = useState(open);
+    useEffect(() => {
+      if (open) {
+        setIsVisible(true);
+      } else {
+        const timer = setTimeout(() => setIsVisible(false), 200);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+    if (!isVisible) return null;
+    const getPositionClasses = () => {
+      const vertical = SIDE_CLASSES[side];
+      const horizontal = ALIGN_CLASSES[align];
+      return `absolute ${vertical} ${horizontal}`;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "menu",
+        className: `
+        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100
+        ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
+        ${getPositionClasses()}
+        ${className}
+      `,
+        style: {
+          marginTop: side === "bottom" ? sideOffset : void 0,
+          marginBottom: side === "top" ? sideOffset : void 0,
+          marginLeft: side === "right" ? sideOffset : void 0,
+          marginRight: side === "left" ? sideOffset : void 0
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuItem = forwardRef(
+  ({
+    className,
+    inset,
+    size = "small",
+    children,
+    iconRight,
+    iconLeft,
+    disabled = false,
+    onClick,
+    ...props
+  }, ref) => {
+    const sizeClasses = ITEM_SIZE_CLASSES[size];
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        "aria-disabled": disabled,
+        className: `
+          focus-visible:bg-background-50
+          relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
+          ${inset && "pl-8"}
+          ${sizeClasses}
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        children: [
+          iconLeft,
+          children,
+          iconRight
+        ]
+      }
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: `my-1 h-px bg-border-200 ${className}`,
+    ...props
+  }
+));
+MenuSeparator.displayName = "MenuSeparator";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  MenuContent,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator
+};

package/dist/IconButton/IconButton.d.mts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+/**
+ * IconButton component props interface
+ */
+type IconButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: 'sm' | 'md';
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconButton component for Analytica Ensino platforms
+ *
+ * Um botão compacto apenas com ícone, ideal para menus dropdown,
+ * barras de ferramentas e ações secundárias.
+ * Oferece dois tamanhos com estilo consistente.
+ * Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.
+ * Compatível com Next.js 15 e React 19.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param size - Tamanho do botão (sm, md)
+ * @param active - Estado ativo/selecionado do botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button compacto estilizado apenas com ícone
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   icon={<MoreVerticalIcon />}
+ *   size="sm"
+ *   onClick={() => openMenu()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique
+ * <IconButton
+ *   icon={<BoldIcon />}
+ *   active={isBold}
+ *   onClick={toggleBold}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para controle programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * <IconButton
+ *   ref={buttonRef}
+ *   icon={<EditIcon />}
+ *   size="md"
+ *   onClick={() => startEditing()}
+ * />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: "sm" | "md";
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonProps };

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+/**
+ * IconButton component props interface
+ */
+type IconButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: 'sm' | 'md';
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconButton component for Analytica Ensino platforms
+ *
+ * Um botão compacto apenas com ícone, ideal para menus dropdown,
+ * barras de ferramentas e ações secundárias.
+ * Oferece dois tamanhos com estilo consistente.
+ * Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.
+ * Compatível com Next.js 15 e React 19.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param size - Tamanho do botão (sm, md)
+ * @param active - Estado ativo/selecionado do botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button compacto estilizado apenas com ícone
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   icon={<MoreVerticalIcon />}
+ *   size="sm"
+ *   onClick={() => openMenu()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique
+ * <IconButton
+ *   icon={<BoldIcon />}
+ *   active={isBold}
+ *   onClick={toggleBold}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para controle programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * <IconButton
+ *   ref={buttonRef}
+ *   icon={<EditIcon />}
+ *   size="md"
+ *   onClick={() => startEditing()}
+ * />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: "sm" | "md";
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonProps };

package/dist/IconButton/IconButton.js

@@ -0,0 +1,79 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/IconButton/IconButton.tsx
+var IconButton_exports = {};
+__export(IconButton_exports, {
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(IconButton_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(
+  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "font-medium",
+      "bg-transparent",
+      "text-text-950",
+      "cursor-pointer",
+      "hover:bg-primary-600",
+      "hover:text-text",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const sizeClasses = {
+      sm: ["w-6", "h-6", "text-sm"],
+      md: ["w-10", "h-10", "text-base"]
+    };
+    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
+    const allClasses = [
+      ...baseClasses,
+      ...sizeClasses[size],
+      ...activeClasses
+    ].join(" ");
+    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton
+});

package/dist/IconButton/IconButton.mjs

@@ -0,0 +1,54 @@
+// src/components/IconButton/IconButton.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var IconButton = forwardRef(
+  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "font-medium",
+      "bg-transparent",
+      "text-text-950",
+      "cursor-pointer",
+      "hover:bg-primary-600",
+      "hover:text-text",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const sizeClasses = {
+      sm: ["w-6", "h-6", "text-sm"],
+      md: ["w-10", "h-10", "text-base"]
+    };
+    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
+    const allClasses = [
+      ...baseClasses,
+      ...sizeClasses[size],
+      ...activeClasses
+    ].join(" ");
+    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+export {
+  IconButton
+};

package/dist/IconRoundedButton/IconRoundedButton.d.mts

@@ -0,0 +1,35 @@
+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.
+ * Compatível com Next.js 15 e React 19.
+ *
+ * @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 };

package/dist/IconRoundedButton/IconRoundedButton.d.ts

@@ -0,0 +1,35 @@
+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.
+ * Compatível com Next.js 15 e React 19.
+ *
+ * @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 };

package/dist/IconRoundedButton/IconRoundedButton.js

@@ -0,0 +1,68 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/IconRoundedButton/IconRoundedButton.tsx
+var IconRoundedButton_exports = {};
+__export(IconRoundedButton_exports, {
+  IconRoundedButton: () => IconRoundedButton
+});
+module.exports = __toCommonJS(IconRoundedButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconRoundedButton = ({
+  icon,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "w-8",
+    "h-8",
+    "rounded-full",
+    "cursor-pointer",
+    "border",
+    "border-background-200",
+    "bg-background",
+    "text-text-950",
+    "hover:shadow-hard-shadow-1",
+    "focus-visible:outline-none",
+    "focus-visible:shadow-hard-shadow-1",
+    "focus-visible:ring-2",
+    "focus-visible:ring-indicator-info",
+    "focus-visible:ring-offset-0",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ].join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      className: `${baseClasses} ${className}`,
+      disabled,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconRoundedButton
+});