UNPKG

analytica-frontend-lib

Version:

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

1,281 lines (1,262 loc) 213 kB
"use strict"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; 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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/components/TableProvider/TableProvider.tsx var TableProvider_exports = {}; __export(TableProvider_exports, { TableProvider: () => TableProvider, default: () => TableProvider_default }); module.exports = __toCommonJS(TableProvider_exports); var import_react16 = require("react"); // src/components/Table/Table.tsx var import_react2 = require("react"); // src/utils/utils.ts var import_clsx = require("clsx"); var import_tailwind_merge = require("tailwind-merge"); function cn(...inputs) { return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs)); } // src/components/Table/Table.tsx var import_phosphor_react2 = require("phosphor-react"); // src/components/Text/Text.tsx var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)( Component, { className: cn(baseClasses, sizeClasses, weightClasses, color, className), ...props, children } ); }; var Text_default = Text; // src/components/NoSearchResult/NoSearchResult.tsx var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row justify-center items-center gap-8 w-full max-w-4xl min-h-96", children: [ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-72 h-72 flex-shrink-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)( "img", { src: image, alt: "No search results", className: "w-full h-full object-contain" } ) }), /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-start w-full max-w-md", children: [ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-row justify-between items-end px-6 pt-6 pb-4 w-full rounded-t-xl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)( Text_default, { as: "h2", className: "text-text-950 font-semibold text-3xl leading-tight w-full flex items-center", children: displayTitle } ) }), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-row justify-center items-center px-6 gap-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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 var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)( "button", { className: cn(baseClasses, variantClasses, sizeClasses, className), disabled, type, ...props, children: [ iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }), children, iconRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ml-2 flex items-center", children: iconRight }) ] } ); }; var Button_default = Button; // src/components/EmptyState/EmptyState.tsx var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("img", { src: image, alt: displayTitle, className: "w-[170px] h-[150px]" }), /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center gap-4 w-full max-w-[600px] px-6", children: [ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)( Text_default, { as: "h2", className: "text-text-950 font-semibold text-3xl leading-[35px] text-center", children: displayTitle } ), /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text_default, { className: "text-text-600 font-normal text-[18px] leading-[27px] text-center", children: displayDescription }) ] }), buttonText && onButtonClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)( 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 var import_react = require("react"); var import_jsx_runtime5 = require("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 = (0, import_react.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__ */ (0, import_jsx_runtime5.jsx)( "div", { ref, className: cn("flex flex-col", spacingClass, className), ...props, children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)( "div", { className: cn(variantClass, animationClass), style: index === lines - 1 ? { width: "60%" } : void 0 }, index )) } ); } return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)( "div", { ref, className: cn(variantClass, animationClass, className), style, ...props, children } ); } ); var SkeletonText = (0, import_react.forwardRef)( (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, { ref, variant: "text", ...props }) ); var SkeletonCircle = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, { ref, variant: "circular", ...props })); var SkeletonRectangle = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, { ref, variant: "rectangular", ...props })); var SkeletonRounded = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, { ref, variant: "rounded", ...props })); var SkeletonCard = (0, import_react.forwardRef)( ({ showAvatar = true, showTitle = true, showDescription = true, showActions = true, lines = 2, className = "", ...props }, ref) => { return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)( "div", { ref, className: cn( "w-full p-4 bg-background border border-border-200 rounded-lg", className ), ...props, children: [ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-start space-x-3", children: [ showAvatar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonCircle, { width: 40, height: 40 }), /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 space-y-2", children: [ showTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonText, { width: "60%", height: 20 }), showDescription && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonText, { lines, spacing: "small" }) ] }) ] }), showActions && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonRectangle, { width: 80, height: 32 }), /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonRectangle, { width: 80, height: 32 }) ] }) ] } ); } ); var SkeletonList = (0, import_react.forwardRef)( ({ items = 3, showAvatar = true, showTitle = true, showDescription = true, lines = 1, className = "", ...props }, ref) => { return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [ showAvatar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonCircle, { width: 32, height: 32 }), /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 space-y-2", children: [ showTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonText, { width: "40%", height: 16 }), showDescription && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonText, { lines, spacing: "small" }) ] }) ] }, index)) }); } ); var SkeletonTable = (0, import_react.forwardRef)( ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => { return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [ showHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)( SkeletonText, { width: `${100 / columns}%`, height: 20 }, index )) }), /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)( SkeletonText, { width: `${100 / columns}%`, height: 16 }, colIndex )) }, rowIndex)) }) ] }); } ); // src/components/Table/TablePagination.tsx var import_phosphor_react = require("phosphor-react"); var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsxs)( "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__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-800", children: [ startItem, " de ", totalItems, " ", itemLabel ] }), /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-4 justify-center sm:justify-start", children: [ onItemsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)( "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__ */ (0, import_jsx_runtime6.jsxs)("option", { value: option, children: [ option, " itens" ] }, option)) } ), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)( import_phosphor_react.CaretDown, { size: 14, weight: "regular", className: "absolute right-3 top-1/2 -translate-y-1/2 text-background-600 pointer-events-none" } ) ] }), /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "font-normal text-xs leading-[14px] text-text-950", children: [ "P\xE1gina ", currentPage, " de ", totalPages ] }), /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)( "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__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react.CaretLeft, { size: 12, weight: "bold", className: "text-primary-950" }), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Anterior" }) ] } ), /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)( "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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "font-medium text-xs leading-[14px] text-primary-950", children: "Pr\xF3xima" }), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react.CaretRight, { size: 12, weight: "bold", className: "text-primary-950" }) ] } ) ] }) ] } ); }; TablePagination.displayName = "TablePagination"; var TablePagination_default = TablePagination; // src/components/Table/Table.tsx var import_jsx_runtime7 = require("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] = (0, import_react2.useState)( initialState.column ); const [sortDirection, setSortDirection] = (0, import_react2.useState)( initialState.direction ); (0, import_react2.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 = (0, import_react2.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 import_react2.Children.map(children, (child) => { if ((0, import_react2.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__ */ (0, import_jsx_runtime7.jsx)( NoSearchResult_default, { image: config.image, title: config.title || defaultTitle, description: config.description || defaultDescription } ); } return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-center", children: [ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-text-600 text-lg font-semibold mb-2", children: config.title || defaultTitle }), /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-text-500 text-sm", children: config.description || defaultDescription }) ] }); }; var getEmptyStateContent = (config, defaultTitle, defaultDescription) => { if (config?.component) { return config.component; } return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( 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__ */ (0, import_jsx_runtime7.jsxs)( "div", { className: cn( "relative w-full overflow-x-auto", variant === "default" && "border border-border-200 rounded-xl" ), children: [ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( "table", { ref: tableRef, className: cn( "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0", className ), ...tableProps, children: renderHeaderElements(children) } ), /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "py-8 flex justify-center", children: stateContent }) ] } ); }; var Table = (0, import_react2.forwardRef)( ({ 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__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)( "div", { className: cn( "relative w-full overflow-x-auto", variant === "default" && "border border-border-200 rounded-xl" ), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)( "table", { ref, className: cn( variant === "default" && "analytica-table", variant === "default" && "border-separate border-spacing-0", "w-full caption-bottom text-sm", className ), ...props, children: [ !import_react2.Children.toArray(children).some( (child) => (0, import_react2.isValidElement)(child) && child.type === TableCaption ) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("caption", { className: "sr-only", children: "My Table" }), children ] } ) } ); } ); Table.displayName = "Table"; var TableHeader = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( "thead", { ref, className: cn("[&_tr:first-child]:border-0", className), ...props } )); TableHeader.displayName = "TableHeader"; var TableBody = (0, import_react2.forwardRef)( ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( "tbody", { ref, className: cn( "[&_tr:last-child]:border-border-200", variant === "default" && "border-t border-border-200", className ), ...props } ) ); TableBody.displayName = "TableBody"; var TableFooter = (0, import_react2.forwardRef)( ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( "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 = (0, import_react2.forwardRef)( ({ variant = "default", state = "default", clickable = false, className, ...props }, ref) => { return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( "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 = (0, import_react2.forwardRef)( ({ className, sortable = true, sortDirection = null, onSort, children, ...props }, ref) => { const handleClick = () => { if (sortable && onSort) { onSort(); } }; return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( "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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [ children, sortable && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", children: [ sortDirection === "asc" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react2.CaretUp, { size: 16, weight: "fill", className: "text-text-800" }), sortDirection === "desc" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react2.CaretDown, { size: 16, weight: "fill", className: "text-text-800" }) ] }) ] }) } ); } ); TableHead.displayName = "TableHead"; var TableCell = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( "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 = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)( "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 var import_react3 = require("react"); var useTableFilter = (initialConfigs, options = {}) => { const { syncWithUrl = false } = options; const getInitialState = (0, import_react3.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] = (0, import_react3.useState)(getInitialState); const activeFilters = (0, import_react3.useMemo)(() => { 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 = (0, import_react3.useCallback)((configs) => { setFilterConfigs(configs); }, []); const applyFilters = (0, import_react3.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 = (0, import_react3.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]); (0, import_react3.useEffect)(() => { 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 var import_phosphor_react6 = require("phosphor-react"); var import_react9 = require("react"); // src/components/DropdownMenu/DropdownMenu.tsx var import_phosphor_react5 = require("phosphor-react"); var import_react8 = require("react"); var import_react_dom = require("react-dom"); var import_zustand2 = require("zustand"); // src/components/Modal/Modal.tsx var import_react4 = require("react"); var import_phosphor_react3 = require("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 var import_jsx_runtime8 = require("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 = (0, import_react4.useId)(); (0, import_react4.useEffect)(() => { if (!isOpen || !closeOnEscape) return; const handleEscape = (event) => { if (event.key === "Escape") { onClose(); } }; document.addEventListener("keydown", handleEscape); return () => document.removeEventListener("keydown", handleEscape); }, [isOpen, closeOnEscape, onClose]); (0, import_react4.useEffect)(() => { 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__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)( "dialog", { className: modalClasses, "aria-labelledby": titleId, "aria-modal": "true", open: true, children: [ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)( "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__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react3.X, { size: 18 }) } ) }), /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [ image && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)( "img", { src: image, alt: imageAlt ?? "", className: "w-[122px] h-[122px] object-contain" } ) }), /* @__PURE__ */ (0, import_jsx_runtime8.jsx)( "h2", { id: titleId, className: "text-lg font-semibold text-text-950 text-center", children: title } ), description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }), actionLink && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("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__ */ (0, import_jsx_runtime8.jsx)( Button_default, { variant: "solid", action: "primary", size: "large", className: "w-full", onClick: handleActionClick, children: actionLabel || "Iniciar Atividade" } ); } return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)( "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__ */ (0, import_jsx_runtime8.jsx)( Button_default, { variant: "solid", action: "primary", size: "large", className: "w-full", onClick: handleActionClick, children: actionLabel || "Iniciar Atividade" } ) ] }) ] }) ] } ) }); } return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)( "dialog", { className: modalClasses, "aria-labelledby": titleId, "aria-modal": "true", open: true, children: [ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }), !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)( "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__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react3.X, { size: 18 }) } ) ] }), children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("px-6 pb-6", contentClassName), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }), footer && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer }) ] } ) }); }; var Modal_default = Modal; // src/components/ThemeToggle/ThemeToggle.tsx var import_phosphor_react4 = require("phosphor-react"); var import_react7 = require("react"); // src/components/SelectionButton/SelectionButton.tsx var import_react5 = require("react"); var import_jsx_runtime9 = require("react/jsx-runtime"); var SelectionButton = (0, import_react5.forwardRef)( ({ 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 /* @__