analytica-frontend-lib/dist/TableProvider/index.mjs

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

// src/components/TableProvider/TableProvider.tsx
import { useState as useState11, useEffect as useEffect12, useMemo as useMemo5, useCallback as useCallback2 } from "react";

// src/components/Table/Table.tsx
import {
  forwardRef as forwardRef2,
  useState,
  useMemo,
  useEffect,
  Children,
  isValidElement
} from "react";

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/Table/Table.tsx
import { CaretUp, CaretDown as CaretDown2 } from "phosphor-react";

// src/components/Text/Text.tsx
import { jsx } from "react/jsx-runtime";
var Text = ({
  children,
  size = "md",
  weight = "normal",
  color = "text-text-950",
  as,
  className = "",
  ...props
}) => {
  let sizeClasses = "";
  let weightClasses = "";
  const sizeClassMap = {
    "2xs": "text-2xs",
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg",
    xl: "text-xl",
    "2xl": "text-2xl",
    "3xl": "text-3xl",
    "4xl": "text-4xl",
    "5xl": "text-5xl",
    "6xl": "text-6xl"
  };
  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
  const weightClassMap = {
    hairline: "font-hairline",
    light: "font-light",
    normal: "font-normal",
    medium: "font-medium",
    semibold: "font-semibold",
    bold: "font-bold",
    extrabold: "font-extrabold",
    black: "font-black"
  };
  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
  const baseClasses = "font-primary";
  const Component = as ?? "p";
  return /* @__PURE__ */ jsx(
    Component,
    {
      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
      ...props,
      children
    }
  );
};
var Text_default = Text;

// src/components/NoSearchResult/NoSearchResult.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var NoSearchResult = ({ image, title, description }) => {
  const displayTitle = title || "Nenhum resultado encontrado";
  const displayDescription = description || "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave.";
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-center items-center gap-8 w-full max-w-4xl min-h-96", children: [
    /* @__PURE__ */ jsx2("div", { className: "w-72 h-72 flex-shrink-0 relative", children: /* @__PURE__ */ jsx2(
      "img",
      {
        src: image,
        alt: "No search results",
        className: "w-full h-full object-contain"
      }
    ) }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start w-full max-w-md", children: [
      /* @__PURE__ */ jsx2("div", { className: "flex flex-row justify-between items-end px-6 pt-6 pb-4 w-full rounded-t-xl", children: /* @__PURE__ */ jsx2(
        Text_default,
        {
          as: "h2",
          className: "text-text-950 font-semibold text-3xl leading-tight w-full flex items-center",
          children: displayTitle
        }
      ) }),
      /* @__PURE__ */ jsx2("div", { className: "flex flex-row justify-center items-center px-6 gap-2 w-full", children: /* @__PURE__ */ jsx2(Text_default, { className: "text-text-600 font-normal text-lg leading-relaxed w-full text-justify", children: displayDescription }) })
    ] })
  ] });
};
var NoSearchResult_default = NoSearchResult;

// src/components/Button/Button.tsx
import { jsx as jsx3, jsxs as jsxs2 } 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__ */ jsxs2(
    "button",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      disabled,
      type,
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx3("span", { className: "mr-2 flex items-center", children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx3("span", { className: "ml-2 flex items-center", children: iconRight })
      ]
    }
  );
};
var Button_default = Button;

// src/components/EmptyState/EmptyState.tsx
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var EmptyState = ({
  image,
  title,
  description,
  buttonText,
  buttonIcon,
  onButtonClick,
  buttonVariant = "solid",
  buttonAction = "primary"
}) => {
  const displayTitle = title || "Nenhum dado dispon\xEDvel";
  const displayDescription = description || "N\xE3o h\xE1 dados para exibir no momento.";
  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col justify-center items-center gap-6 w-full min-h-[705px] bg-background rounded-xl p-6", children: [
    image && /* @__PURE__ */ jsx4("img", { src: image, alt: displayTitle, className: "w-[170px] h-[150px]" }),
    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-4 w-full max-w-[600px] px-6", children: [
      /* @__PURE__ */ jsx4(
        Text_default,
        {
          as: "h2",
          className: "text-text-950 font-semibold text-3xl leading-[35px] text-center",
          children: displayTitle
        }
      ),
      /* @__PURE__ */ jsx4(Text_default, { className: "text-text-600 font-normal text-[18px] leading-[27px] text-center", children: displayDescription })
    ] }),
    buttonText && onButtonClick && /* @__PURE__ */ jsx4(
      Button_default,
      {
        variant: buttonVariant,
        action: buttonAction,
        size: "large",
        onClick: onButtonClick,
        iconLeft: buttonIcon,
        className: "rounded-full px-5 py-2.5",
        children: buttonText
      }
    )
  ] });
};
var EmptyState_default = EmptyState;

// src/components/Skeleton/Skeleton.tsx
import { forwardRef } from "react";
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
var SKELETON_ANIMATION_CLASSES = {
  pulse: "animate-pulse",
  none: ""
};
var SKELETON_VARIANT_CLASSES = {
  text: "h-4 bg-background-200 rounded",
  circular: "bg-background-200 rounded-full",
  rectangular: "bg-background-200",
  rounded: "bg-background-200 rounded-lg"
};
var SPACING_CLASSES = {
  none: "",
  small: "space-y-1",
  medium: "space-y-2",
  large: "space-y-3"
};
var Skeleton = forwardRef(
  ({
    variant = "text",
    width,
    height,
    animation = "pulse",
    lines = 1,
    spacing = "none",
    className = "",
    children,
    ...props
  }, ref) => {
    const animationClass = SKELETON_ANIMATION_CLASSES[animation];
    const variantClass = SKELETON_VARIANT_CLASSES[variant];
    const spacingClass = SPACING_CLASSES[spacing];
    const style = {
      width: typeof width === "number" ? `${width}px` : width,
      height: typeof height === "number" ? `${height}px` : height
    };
    if (variant === "text" && lines > 1) {
      return /* @__PURE__ */ jsx5(
        "div",
        {
          ref,
          className: cn("flex flex-col", spacingClass, className),
          ...props,
          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx5(
            "div",
            {
              className: cn(variantClass, animationClass),
              style: index === lines - 1 ? { width: "60%" } : void 0
            },
            index
          ))
        }
      );
    }
    return /* @__PURE__ */ jsx5(
      "div",
      {
        ref,
        className: cn(variantClass, animationClass, className),
        style,
        ...props,
        children
      }
    );
  }
);
var SkeletonText = forwardRef(
  (props, ref) => /* @__PURE__ */ jsx5(Skeleton, { ref, variant: "text", ...props })
);
var SkeletonCircle = forwardRef((props, ref) => /* @__PURE__ */ jsx5(Skeleton, { ref, variant: "circular", ...props }));
var SkeletonRectangle = forwardRef((props, ref) => /* @__PURE__ */ jsx5(Skeleton, { ref, variant: "rectangular", ...props }));
var SkeletonRounded = forwardRef((props, ref) => /* @__PURE__ */ jsx5(Skeleton, { ref, variant: "rounded", ...props }));
var SkeletonCard = forwardRef(
  ({
    showAvatar = true,
    showTitle = true,
    showDescription = true,
    showActions = true,
    lines = 2,
    className = "",
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsxs4(
      "div",
      {
        ref,
        className: cn(
          "w-full p-4 bg-background border border-border-200 rounded-lg",
          className
        ),
        ...props,
        children: [
          /* @__PURE__ */ jsxs4("div", { className: "flex items-start space-x-3", children: [
            showAvatar && /* @__PURE__ */ jsx5(SkeletonCircle, { width: 40, height: 40 }),
            /* @__PURE__ */ jsxs4("div", { className: "flex-1 space-y-2", children: [
              showTitle && /* @__PURE__ */ jsx5(SkeletonText, { width: "60%", height: 20 }),
              showDescription && /* @__PURE__ */ jsx5(SkeletonText, { lines, spacing: "small" })
            ] })
          ] }),
          showActions && /* @__PURE__ */ jsxs4("div", { className: "flex justify-end space-x-2 mt-4", children: [
            /* @__PURE__ */ jsx5(SkeletonRectangle, { width: 80, height: 32 }),
            /* @__PURE__ */ jsx5(SkeletonRectangle, { width: 80, height: 32 })
          ] })
        ]
      }
    );
  }
);
var SkeletonList = forwardRef(
  ({
    items = 3,
    showAvatar = true,
    showTitle = true,
    showDescription = true,
    lines = 1,
    className = "",
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx5("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs4("div", { className: "flex items-start space-x-3 p-3", children: [
      showAvatar && /* @__PURE__ */ jsx5(SkeletonCircle, { width: 32, height: 32 }),
      /* @__PURE__ */ jsxs4("div", { className: "flex-1 space-y-2", children: [
        showTitle && /* @__PURE__ */ jsx5(SkeletonText, { width: "40%", height: 16 }),
        showDescription && /* @__PURE__ */ jsx5(SkeletonText, { lines, spacing: "small" })
      ] })
    ] }, index)) });
  }
);
var SkeletonTable = forwardRef(
  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
    return /* @__PURE__ */ jsxs4("div", { ref, className: cn("w-full", className), ...props, children: [
      showHeader && /* @__PURE__ */ jsx5("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx5(
        SkeletonText,
        {
          width: `${100 / columns}%`,
          height: 20
        },
        index
      )) }),
      /* @__PURE__ */ jsx5("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx5("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ jsx5(
        SkeletonText,
        {
          width: `${100 / columns}%`,
          height: 16
        },
        colIndex
      )) }, rowIndex)) })
    ] });
  }
);

// src/components/Table/TablePagination.tsx
import { CaretLeft, CaretRight, CaretDown } from "phosphor-react";
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
var TablePagination = ({
  totalItems,
  currentPage,
  totalPages,
  itemsPerPage,
  itemsPerPageOptions = [10, 20, 50, 100],
  onPageChange,
  onItemsPerPageChange,
  itemLabel = "itens",
  className,
  ...props
}) => {
  const startItem = (currentPage - 1) * itemsPerPage + 1;
  const handlePrevious = () => {
    if (currentPage > 1) {
      onPageChange(currentPage - 1);
    }
  };
  const handleNext = () => {
    if (currentPage < totalPages) {
      onPageChange(currentPage + 1);
    }
  };
  const handleItemsPerPageChange = (e) => {
    if (onItemsPerPageChange) {
      onItemsPerPageChange(Number(e.target.value));
    }
  };
  const isFirstPage = currentPage === 1;
  const isLastPage = currentPage === totalPages;
  return /* @__PURE__ */ jsxs5(
    "div",
    {
      className: cn(
        "flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full bg-background-50 rounded-xl p-4",
        "sm:justify-between",
        className
      ),
      ...props,
      children: [
        /* @__PURE__ */ jsxs5("span", { className: "font-normal text-xs leading-[14px] text-text-800", children: [
          startItem,
          " de ",
          totalItems,
          " ",
          itemLabel
        ] }),
        /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start", children: [
          onItemsPerPageChange && /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
            /* @__PURE__ */ jsx6(
              "select",
              {
                value: itemsPerPage,
                onChange: handleItemsPerPageChange,
                className: "w-24 h-9 py-0 px-3 pr-8 bg-background border border-border-300 rounded appearance-none cursor-pointer font-normal text-sm leading-[21px] text-text-900",
                "aria-label": "Items por p\xE1gina",
                children: itemsPerPageOptions.map((option) => /* @__PURE__ */ jsxs5("option", { value: option, children: [
                  option,
                  " itens"
                ] }, option))
              }
            ),
            /* @__PURE__ */ jsx6(
              CaretDown,
              {
                size: 14,
                weight: "regular",
                className: "absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none"
              }
            )
          ] }),
          /* @__PURE__ */ jsxs5("span", { className: "font-normal text-xs leading-[14px] text-text-950", children: [
            "P\xE1gina ",
            currentPage,
            " de ",
            totalPages
          ] }),
          /* @__PURE__ */ jsxs5(
            "button",
            {
              onClick: handlePrevious,
              disabled: isFirstPage,
              className: cn(
                "flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
                isFirstPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
              ),
              "aria-label": "P\xE1gina anterior",
              children: [
                /* @__PURE__ */ jsx6(CaretLeft, { size: 12, weight: "bold", className: "text-primary-950" }),
                /* @__PURE__ */ jsx6("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Anterior" })
              ]
            }
          ),
          /* @__PURE__ */ jsxs5(
            "button",
            {
              onClick: handleNext,
              disabled: isLastPage,
              className: cn(
                "flex flex-row justify-center items-center py-2 px-4 gap-2 rounded-3xl transition-all",
                isLastPage ? "opacity-50 cursor-not-allowed" : "hover:bg-primary-950/10 cursor-pointer"
              ),
              "aria-label": "Pr\xF3xima p\xE1gina",
              children: [
                /* @__PURE__ */ jsx6("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Pr\xF3xima" }),
                /* @__PURE__ */ jsx6(CaretRight, { size: 12, weight: "bold", className: "text-primary-950" })
              ]
            }
          )
        ] })
      ]
    }
  );
};
TablePagination.displayName = "TablePagination";
var TablePagination_default = TablePagination;

// src/components/Table/Table.tsx
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
function useTableSort(data, options = {}) {
  const { syncWithUrl = false } = options;
  const getInitialState = () => {
    if (!syncWithUrl || globalThis.window === void 0) {
      return { column: null, direction: null };
    }
    const params = new URLSearchParams(globalThis.location.search);
    const sortBy = params.get("sortBy");
    const sort = params.get("sort");
    if (sortBy && sort && (sort === "ASC" || sort === "DESC")) {
      return {
        column: sortBy,
        direction: sort.toLowerCase()
      };
    }
    return { column: null, direction: null };
  };
  const initialState = getInitialState();
  const [sortColumn, setSortColumn] = useState(
    initialState.column
  );
  const [sortDirection, setSortDirection] = useState(
    initialState.direction
  );
  useEffect(() => {
    if (!syncWithUrl || globalThis.window === void 0) return;
    const url = new URL(globalThis.location.href);
    const params = url.searchParams;
    if (sortColumn && sortDirection) {
      params.set("sortBy", sortColumn);
      params.set("sort", sortDirection.toUpperCase());
    } else {
      params.delete("sortBy");
      params.delete("sort");
    }
    globalThis.history.replaceState({}, "", url.toString());
  }, [sortColumn, sortDirection, syncWithUrl]);
  const handleSort = (column) => {
    if (sortColumn === column) {
      if (sortDirection === "asc") {
        setSortDirection("desc");
      } else if (sortDirection === "desc") {
        setSortColumn(null);
        setSortDirection(null);
      }
    } else {
      setSortColumn(column);
      setSortDirection("asc");
    }
  };
  const sortedData = useMemo(() => {
    if (!sortColumn || !sortDirection) {
      return data;
    }
    return [...data].sort((a, b) => {
      const aValue = a[sortColumn];
      const bValue = b[sortColumn];
      if (typeof aValue === "string" && typeof bValue === "string") {
        const comparison = aValue.localeCompare(bValue);
        return sortDirection === "asc" ? comparison : -comparison;
      }
      if (typeof aValue === "number" && typeof bValue === "number") {
        return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
      }
      return 0;
    });
  }, [data, sortColumn, sortDirection]);
  return { sortedData, sortColumn, sortDirection, handleSort };
}
var renderHeaderElements = (children) => {
  return Children.map(children, (child) => {
    if (isValidElement(child) && (child.type === TableCaption || child.type === TableHeader)) {
      return child;
    }
    return null;
  });
};
var getNoSearchResultContent = (config, defaultTitle, defaultDescription) => {
  if (config.component) {
    return config.component;
  }
  if (config.image) {
    return /* @__PURE__ */ jsx7(
      NoSearchResult_default,
      {
        image: config.image,
        title: config.title || defaultTitle,
        description: config.description || defaultDescription
      }
    );
  }
  return /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
    /* @__PURE__ */ jsx7("p", { className: "text-text-600 text-lg font-semibold mb-2", children: config.title || defaultTitle }),
    /* @__PURE__ */ jsx7("p", { className: "text-text-500 text-sm", children: config.description || defaultDescription })
  ] });
};
var getEmptyStateContent = (config, defaultTitle, defaultDescription) => {
  if (config?.component) {
    return config.component;
  }
  return /* @__PURE__ */ jsx7(
    EmptyState_default,
    {
      image: config?.image,
      title: config?.title || defaultTitle,
      description: config?.description || defaultDescription,
      buttonText: config?.buttonText,
      buttonIcon: config?.buttonIcon,
      onButtonClick: config?.onButtonClick,
      buttonVariant: config?.buttonVariant,
      buttonAction: config?.buttonAction
    }
  );
};
var renderTableWrapper = (variant, tableRef, className, children, stateContent, tableProps) => {
  return /* @__PURE__ */ jsxs6(
    "div",
    {
      className: cn(
        "relative w-full overflow-x-auto",
        variant === "default" && "border border-border-200 rounded-xl"
      ),
      children: [
        /* @__PURE__ */ jsx7(
          "table",
          {
            ref: tableRef,
            className: cn(
              "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
              className
            ),
            ...tableProps,
            children: renderHeaderElements(children)
          }
        ),
        /* @__PURE__ */ jsx7("div", { className: "py-8 flex justify-center", children: stateContent })
      ]
    }
  );
};
var Table = forwardRef2(
  ({
    variant = "default",
    className,
    children,
    showLoading = false,
    loadingState,
    showNoSearchResult = false,
    noSearchResultState,
    showEmpty = false,
    emptyState,
    ...props
  }, ref) => {
    const defaultNoSearchResultState = {
      title: "Nenhum resultado encontrado",
      description: "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave."
    };
    const defaultEmptyState = {
      title: "Nenhum dado dispon\xEDvel",
      description: "N\xE3o h\xE1 dados para exibir no momento."
    };
    const finalNoSearchResultState = noSearchResultState || defaultNoSearchResultState;
    const finalEmptyState = emptyState || defaultEmptyState;
    if (showLoading) {
      const loadingContent = loadingState?.component || /* @__PURE__ */ jsx7(SkeletonTable, { rows: 5, columns: 4, showHeader: false });
      return renderTableWrapper(
        variant,
        ref,
        className,
        children,
        loadingContent,
        props
      );
    }
    if (showNoSearchResult) {
      const noSearchContent = getNoSearchResultContent(
        finalNoSearchResultState,
        defaultNoSearchResultState.title || "",
        defaultNoSearchResultState.description || ""
      );
      return renderTableWrapper(
        variant,
        ref,
        className,
        children,
        noSearchContent,
        props
      );
    }
    if (showEmpty) {
      const emptyContent = getEmptyStateContent(
        finalEmptyState,
        defaultEmptyState.title || "Nenhum dado dispon\xEDvel",
        defaultEmptyState.description || "N\xE3o h\xE1 dados para exibir no momento."
      );
      return renderTableWrapper(
        variant,
        ref,
        className,
        children,
        emptyContent,
        props
      );
    }
    return /* @__PURE__ */ jsx7(
      "div",
      {
        className: cn(
          "relative w-full overflow-x-auto",
          variant === "default" && "border border-border-200 rounded-xl"
        ),
        children: /* @__PURE__ */ jsxs6(
          "table",
          {
            ref,
            className: cn(
              variant === "default" && "analytica-table",
              variant === "default" && "border-separate border-spacing-0",
              "w-full caption-bottom text-sm",
              className
            ),
            ...props,
            children: [
              !Children.toArray(children).some(
                (child) => isValidElement(child) && child.type === TableCaption
              ) && /* @__PURE__ */ jsx7("caption", { className: "sr-only", children: "My Table" }),
              children
            ]
          }
        )
      }
    );
  }
);
Table.displayName = "Table";
var TableHeader = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
  "thead",
  {
    ref,
    className: cn("[&_tr:first-child]:border-0", className),
    ...props
  }
));
TableHeader.displayName = "TableHeader";
var TableBody = forwardRef2(
  ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx7(
    "tbody",
    {
      ref,
      className: cn(
        "[&_tr:last-child]:border-border-200",
        variant === "default" && "border-t border-border-200",
        className
      ),
      ...props
    }
  )
);
TableBody.displayName = "TableBody";
var TableFooter = forwardRef2(
  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ jsx7(
    "tfoot",
    {
      ref,
      className: cn(
        "bg-background-50 font-medium [&>tr]:last:border-b-0 px-6 py-3.5",
        variant === "default" && "border-t border-border-200",
        className
      ),
      ...props
    }
  )
);
TableFooter.displayName = "TableFooter";
var VARIANT_STATES_ROW = {
  default: {
    default: "border border-border-200",
    defaultBorderless: "border-b border-border-200",
    borderless: ""
  },
  selected: {
    default: "border-b-2 border-indicator-primary",
    defaultBorderless: "border-b border-indicator-primary",
    borderless: "bg-indicator-primary/10"
  },
  invalid: {
    default: "border-b-2 border-indicator-error",
    defaultBorderless: "border-b border-indicator-error",
    borderless: "bg-indicator-error/10"
  },
  disabled: {
    default: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed",
    defaultBorderless: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed",
    borderless: "bg-background-50 opacity-50 cursor-not-allowed"
  }
};
var TableRow = forwardRef2(
  ({
    variant = "default",
    state = "default",
    clickable = false,
    className,
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx7(
      "tr",
      {
        ref,
        className: cn(
          "transition-colors",
          state === "disabled" ? "" : "hover:bg-muted/50",
          state === "disabled" || !clickable ? "" : "cursor-pointer",
          VARIANT_STATES_ROW[state][variant],
          className
        ),
        "aria-disabled": state === "disabled",
        ...props
      }
    );
  }
);
TableRow.displayName = "TableRow";
var TableHead = forwardRef2(
  ({
    className,
    sortable = true,
    sortDirection = null,
    onSort,
    children,
    ...props
  }, ref) => {
    const handleClick = () => {
      if (sortable && onSort) {
        onSort();
      }
    };
    return /* @__PURE__ */ jsx7(
      "th",
      {
        ref,
        className: cn(
          "h-10 px-6 py-3.5 text-left align-middle font-bold text-base text-text-800 tracking-[0.2px] leading-none [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] whitespace-nowrap",
          sortable && "cursor-pointer select-none hover:bg-muted/30",
          className
        ),
        onClick: handleClick,
        ...props,
        children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
          children,
          sortable && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
            sortDirection === "asc" && /* @__PURE__ */ jsx7(CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
            sortDirection === "desc" && /* @__PURE__ */ jsx7(CaretDown2, { size: 16, weight: "fill", className: "text-text-800" })
          ] })
        ] })
      }
    );
  }
);
TableHead.displayName = "TableHead";
var TableCell = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
  "td",
  {
    ref,
    className: cn(
      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-base font-normal text-text-800 leading-[150%] tracking-normal px-6 py-3.5 whitespace-nowrap",
      className
    ),
    ...props
  }
));
TableCell.displayName = "TableCell";
var TableCaption = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
  "caption",
  {
    ref,
    className: cn(
      "border-t border-border-200 text-sm text-text-800 px-6 py-3.5",
      className
    ),
    ...props
  }
));
TableCaption.displayName = "TableCaption";
var Table_default = Table;

// src/components/Filter/useTableFilter.ts
import { useEffect as useEffect2, useState as useState2, useCallback, useMemo as useMemo2 } from "react";
var useTableFilter = (initialConfigs, options = {}) => {
  const { syncWithUrl = false } = options;
  const getInitialState = useCallback(() => {
    if (!syncWithUrl || globalThis.window === void 0) {
      return initialConfigs;
    }
    const params = new URLSearchParams(globalThis.window.location.search);
    const configsWithUrlState = initialConfigs.map((config) => ({
      ...config,
      categories: config.categories.map((category) => {
        const urlValue = params.get(`filter_${category.key}`);
        const selectedIds = urlValue ? urlValue.split(",").filter(Boolean) : [];
        return {
          ...category,
          selectedIds
        };
      })
    }));
    return configsWithUrlState;
  }, [initialConfigs, syncWithUrl]);
  const [filterConfigs, setFilterConfigs] = useState2(getInitialState);
  const activeFilters = useMemo2(() => {
    const filters = {};
    for (const config of filterConfigs) {
      for (const category of config.categories) {
        if (category.selectedIds && category.selectedIds.length > 0) {
          filters[category.key] = category.selectedIds;
        }
      }
    }
    return filters;
  }, [filterConfigs]);
  const hasActiveFilters = Object.keys(activeFilters).length > 0;
  const updateFilters = useCallback((configs) => {
    setFilterConfigs(configs);
  }, []);
  const applyFilters = useCallback(() => {
    if (!syncWithUrl || globalThis.window === void 0) {
      return;
    }
    const url = new URL(globalThis.window.location.href);
    const params = url.searchParams;
    for (const config of filterConfigs) {
      for (const category of config.categories) {
        const paramKey = `filter_${category.key}`;
        if (category.selectedIds && category.selectedIds.length > 0) {
          params.set(paramKey, category.selectedIds.join(","));
        } else {
          params.delete(paramKey);
        }
      }
    }
    globalThis.window.history.replaceState({}, "", url.toString());
  }, [filterConfigs, syncWithUrl]);
  const clearFilters = useCallback(() => {
    const clearedConfigs = filterConfigs.map((config) => ({
      ...config,
      categories: config.categories.map((category) => ({
        ...category,
        selectedIds: []
      }))
    }));
    setFilterConfigs(clearedConfigs);
    if (syncWithUrl && globalThis.window !== void 0) {
      const url = new URL(globalThis.window.location.href);
      const params = url.searchParams;
      for (const config of filterConfigs) {
        for (const category of config.categories) {
          params.delete(`filter_${category.key}`);
        }
      }
      globalThis.window.history.replaceState({}, "", url.toString());
    }
  }, [filterConfigs, syncWithUrl]);
  useEffect2(() => {
    if (!syncWithUrl || globalThis.window === void 0) {
      return;
    }
    const handlePopState = () => {
      setFilterConfigs(getInitialState());
    };
    globalThis.window.addEventListener("popstate", handlePopState);
    return () => globalThis.window.removeEventListener("popstate", handlePopState);
  }, [syncWithUrl, getInitialState]);
  return {
    filterConfigs,
    activeFilters,
    hasActiveFilters,
    updateFilters,
    applyFilters,
    clearFilters
  };
};

// src/components/Search/Search.tsx
import { X as X2, MagnifyingGlass } from "phosphor-react";
import {
  forwardRef as forwardRef5,
  useState as useState5,
  useId as useId2,
  useMemo as useMemo3,
  useEffect as useEffect7,
  useRef as useRef2
} from "react";

// src/components/DropdownMenu/DropdownMenu.tsx
import { CaretRight as CaretRight2, SignOut, User } from "phosphor-react";
import {
  forwardRef as forwardRef4,
  useEffect as useEffect6,
  useLayoutEffect,
  useRef,
  isValidElement as isValidElement2,
  Children as Children2,
  cloneElement,
  useState as useState4
} from "react";
import { createPortal } from "react-dom";
import { create as create2, useStore } from "zustand";

// src/components/Modal/Modal.tsx
import { useEffect as useEffect3, useId } from "react";
import { X } from "phosphor-react";

// src/components/Modal/utils/videoUtils.ts
var isYouTubeUrl = (url) => {
  const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
  return youtubeRegex.test(url);
};
var isValidYouTubeHost = (host) => {
  if (host === "youtu.be") return "youtu.be";
  const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
  if (isValidYouTubeCom) return "youtube";
  const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
  if (isValidNoCookie) return "nocookie";
  return null;
};
var extractYoutuBeId = (pathname) => {
  const firstSeg = pathname.split("/").filter(Boolean)[0];
  return firstSeg || null;
};
var extractYouTubeId = (pathname, searchParams) => {
  const parts = pathname.split("/").filter(Boolean);
  const [first, second] = parts;
  if (first === "embed" && second) return second;
  if (first === "shorts" && second) return second;
  if (first === "live" && second) return second;
  const v = searchParams.get("v");
  if (v) return v;
  return null;
};
var getYouTubeVideoId = (url) => {
  try {
    const u = new URL(url);
    const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
    if (!hostType) return null;
    if (hostType === "youtu.be") {
      return extractYoutuBeId(u.pathname);
    }
    return extractYouTubeId(u.pathname, u.searchParams);
  } catch {
    return null;
  }
};
var getYouTubeEmbedUrl = (videoId) => {
  return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
};

// src/components/Modal/Modal.tsx
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
var SIZE_CLASSES2 = {
  xs: "max-w-[360px]",
  sm: "max-w-[420px]",
  md: "max-w-[510px]",
  lg: "max-w-[640px]",
  xl: "max-w-[970px]"
};
var Modal = ({
  isOpen,
  onClose,
  title,
  children,
  size = "md",
  className = "",
  closeOnEscape = true,
  footer,
  hideCloseButton = false,
  variant = "default",
  description,
  image,
  imageAlt,
  actionLink,
  actionLabel,
  contentClassName = ""
}) => {
  const titleId = useId();
  useEffect3(() => {
    if (!isOpen || !closeOnEscape) return;
    const handleEscape = (event) => {
      if (event.key === "Escape") {
        onClose();
      }
    };
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [isOpen, closeOnEscape, onClose]);
  useEffect3(() => {
    if (!isOpen) return;
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    const originalOverflow = document.body.style.overflow;
    const originalPaddingRight = document.body.style.paddingRight;
    document.body.style.overflow = "hidden";
    if (scrollbarWidth > 0) {
      document.body.style.paddingRight = `${scrollbarWidth}px`;
      const overlay = document.createElement("div");
      overlay.id = "modal-scrollbar-overlay";
      overlay.style.cssText = `
        position: fixed;
        top: 0;
        right: 0;
        width: ${scrollbarWidth}px;
        height: 100vh;
        background-color: rgb(0 0 0 / 0.6);
        z-index: 40;
        pointer-events: none;
      `;
      document.body.appendChild(overlay);
    }
    return () => {
      document.body.style.overflow = originalOverflow;
      document.body.style.paddingRight = originalPaddingRight;
      const overlay = document.getElementById("modal-scrollbar-overlay");
      if (overlay) {
        overlay.remove();
      }
    };
  }, [isOpen]);
  if (!isOpen) return null;
  const sizeClasses = SIZE_CLASSES2[size];
  const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
  const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
  const modalClasses = cn(
    baseClasses,
    sizeClasses,
    dialogResetClasses,
    className
  );
  const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
  const handleActionClick = () => {
    if (actionLink) {
      window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
    }
  };
  if (variant === "activity") {
    return /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ jsxs7(
      "dialog",
      {
        className: modalClasses,
        "aria-labelledby": titleId,
        "aria-modal": "true",
        open: true,
        children: [
          /* @__PURE__ */ jsx8("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ jsx8(
            "button",
            {
              onClick: onClose,
              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
              "aria-label": "Fechar modal",
              children: /* @__PURE__ */ jsx8(X, { size: 18 })
            }
          ) }),
          /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
            image && /* @__PURE__ */ jsx8("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx8(
              "img",
              {
                src: image,
                alt: imageAlt ?? "",
                className: "w-[122px] h-[122px] object-contain"
              }
            ) }),
            /* @__PURE__ */ jsx8(
              "h2",
              {
                id: titleId,
                className: "text-lg font-semibold text-text-950 text-center",
                children: title
              }
            ),
            description && /* @__PURE__ */ jsx8("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
            actionLink && /* @__PURE__ */ jsxs7("div", { className: "w-full", children: [
              (() => {
                const normalized = normalizeUrl(actionLink);
                const isYT = isYouTubeUrl(normalized);
                if (!isYT) return null;
                const id = getYouTubeVideoId(normalized);
                if (!id) {
                  return /* @__PURE__ */ jsx8(
                    Button_default,
                    {
                      variant: "solid",
                      action: "primary",
                      size: "large",
                      className: "w-full",
                      onClick: handleActionClick,
                      children: actionLabel || "Iniciar Atividade"
                    }
                  );
                }
                return /* @__PURE__ */ jsx8(
                  "iframe",
                  {
                    src: getYouTubeEmbedUrl(id),
                    className: "w-full aspect-video rounded-lg",
                    allowFullScreen: true,
                    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
                    title: "V\xEDdeo YouTube"
                  }
                );
              })(),
              !isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ jsx8(
                Button_default,
                {
                  variant: "solid",
                  action: "primary",
                  size: "large",
                  className: "w-full",
                  onClick: handleActionClick,
                  children: actionLabel || "Iniciar Atividade"
                }
              )
            ] })
          ] })
        ]
      }
    ) });
  }
  return /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ jsxs7(
    "dialog",
    {
      className: modalClasses,
      "aria-labelledby": titleId,
      "aria-modal": "true",
      open: true,
      children: [
        /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-6", children: [
          /* @__PURE__ */ jsx8("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
          !hideCloseButton && /* @__PURE__ */ jsx8(
            "button",
            {
              onClick: onClose,
              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
              "aria-label": "Fechar modal",
              children: /* @__PURE__ */ jsx8(X, { size: 18 })
            }
          )
        ] }),
        children && /* @__PURE__ */ jsx8("div", { className: cn("px-6 pb-6", contentClassName), children: /* @__PURE__ */ jsx8("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
        footer && /* @__PURE__ */ jsx8("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
      ]
    }
  ) });
};
var Modal_default = Modal;

// src/components/ThemeToggle/ThemeToggle.tsx
import { Moon, Sun } from "phosphor-react";
import { useState as useState3, useEffect as useEffect5 } from "react";

// src/components/SelectionButton/SelectionButton.tsx
import { forwardRef as forwardRef3 } from "react";
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
var SelectionButton = forwardRef3(
  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
    const baseClasses = [
      "inline-flex",
      "items-center",
      "justify-start",
      "gap-2",
      "p-4",
      "rounded-xl",
      "cursor-pointer",
      "border",
      "border-border-50",
      "bg-background",
      "text-sm",
      "text-text-700",
      "font-bold",
      "shadow-soft-shadow-1",
      "hover:bg-background-100",
      "focus-visible:outline-none",
      "focus-visible:ring-2",
      "focus-visible:ring-indicator-info",
      "focus-visible:ring-offset-0",
      "focus-visible:shadow-none",
      "active:ring-2",
      "active:ring-primary-950",
      "active:ring-offset-0",
      "active:shadow-none",
      "disabled:opacity-50",
      "disabled:cursor-not-allowed"
    ];
    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
    const allClasses = [...baseClasses, ...stateClasses].join(" ");
    return /* @__PURE__ */ jsxs8(
      "button",
      {
        ref,
        type: "button",
        className: cn(allClasses, className),
        disabled,
        "aria-pressed": selected,
        ...props,
        children: [
          /* @__PURE__ */ jsx9("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
          /* @__PURE__ */ jsx9("span", { children: label })
        ]
      }
    );
  }
);
SelectionButton.displayName = "SelectionButton";
var SelectionButton_default = SelectionButton;

// src/hooks/useTheme.ts
import { useEffect as useEffect4 } from "react";

// src/store/themeStore.ts
import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
var applyThemeToDOM = (mode) => {
  const htmlElement = document.documentElement;
  const originalTheme = htmlElement.getAttribute("data-original-theme");
  if (mode === "dark") {
    htmlElement.setAttribute("data-theme", "dark");
    return true;
  } else if (mode === "light") {
    if (originalTheme) {
      htmlElement.setAttribute("data-theme", originalTheme);
    }
    return false;
  } else if (mode === "system") {
    const isSystemDark = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;
    if (isSystemDark) {
      htmlElement.setAttribute("data-theme", "dark");
      return true;
    } else if (originalTheme) {
      htmlElement.setAttribute("data-theme", originalTheme);
      return false;
    }
  }
  return false;
};
var saveOriginalTheme = () => {
  const htmlElement = document.documentElement;
  const currentTheme = htmlElement.getAttribute("data-theme");
  if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
    htmlElement.setAttribute("data-original-theme", currentTheme);
  }
};
var useThemeStore = create()(
  devtools(
    persist(
      (set, get) => ({
        // Initial state
        themeMode: "system",
        isDark: false,
        // Actions
        applyTheme: (mode) => {
          const isDark = applyThemeToDOM(mode);
          set({ isDark });
        },
        toggleTheme: () => {
          const { themeMode, applyTheme } = get();
          let newMode;
          if (themeMode === "light") {
            newMode = "dark";
          } else if (themeMode === "dark") {
            newMode = "light";
          } else {
            newMode = "dark";
          }
          set({ themeMode: newMode });
          applyTheme(newMode);
        },
        setTheme: (mode) => {
          const { applyTheme } = get();
          set({ themeMode: mode });
          applyTheme(mode);
        },
        initializeTheme: () => {
          const { themeMode, applyTheme } = get();
          saveOriginalTheme();
          applyTheme(themeMode);
        },
        handleSystemThemeChange: () => {
          const { themeMode, applyTheme } = get();
          if (themeMode === "system") {
            applyTheme("system");
          }
        }
      }),
      {
        name: "theme-store",
        // Nome da chave no localStorage
        partialize: (state) => ({
          themeMode: state.themeMode
        })
        // Só persiste o themeMode, não o isDark
      }
    ),
    {
      name: "theme-store"
    }
  )
);

// src/hooks/useTheme.ts
var useTheme = () => {
  const {
    themeMode,
    isDark,
    toggleTheme,
    setTheme,
    initializeTheme,
    handleSystemThemeChange
  } = useThemeStore();
  useEffect4(() => {
    initializeTheme();
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", handleSystemThemeChange);
    return () => {
      mediaQuery.removeEventListener("change", handleSystemThemeChange);
    };
  }, [initializeTheme, handleSystemThemeChange]);
  return {
    themeMode,
    isDark,
    toggleTheme,
    setTheme
  };
};

// src/components/ThemeToggle/ThemeToggle.tsx
import { jsx as jsx10 } from "react/jsx-runtime";
var ThemeToggle = ({
  variant = "default",
  onToggle
}) => {
  const { themeMode, setTheme } = useTheme();
  const [tempTheme, setTempTheme] = useState3(themeMode);
  useEffect5(() => {
    setTempTheme(themeMode);
  }, [themeMode]);
  const problemTypes = [
    {
      id: "light",
      title: "Claro",
      icon: /* @__PURE__ */ jsx10(Sun, { size: 24 })
    },
    {
      id: "dark",
      title: "Escuro",