analytica-frontend-lib/dist/chunk-2ACDTDO4.mjs

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

import {
  CardBase
} from "./chunk-R7FP73MH.mjs";
import {
  cn
} from "./chunk-53ICLDGS.mjs";

// src/components/Accordation/Accordation.tsx
import {
  forwardRef,
  useId,
  useState,
  useEffect
} from "react";
import { CaretRightIcon } from "@phosphor-icons/react/dist/csr/CaretRight";
import { jsx, jsxs } from "react/jsx-runtime";
var CardAccordation = forwardRef(
  ({
    trigger,
    children,
    className,
    defaultExpanded = false,
    expanded: controlledExpanded,
    onToggleExpanded,
    value,
    disabled = false,
    triggerClassName,
    contentClassName,
    ...props
  }, ref) => {
    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
    const generatedId = useId();
    const contentId = value ? `accordion-content-${value}` : generatedId;
    const headerId = value ? `accordion-header-${value}` : `${generatedId}-header`;
    const isControlled = controlledExpanded !== void 0;
    const isExpanded = isControlled ? controlledExpanded : internalExpanded;
    useEffect(() => {
      if (isControlled) {
        setInternalExpanded(controlledExpanded);
      }
    }, [isControlled, controlledExpanded]);
    const handleToggle = () => {
      if (disabled) return;
      const newExpanded = !isExpanded;
      if (!isControlled) {
        setInternalExpanded(newExpanded);
      }
      onToggleExpanded?.(newExpanded);
    };
    const handleKeyDown = (event) => {
      if (disabled) return;
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        handleToggle();
      }
    };
    return /* @__PURE__ */ jsxs(
      CardBase,
      {
        ref,
        layout: "vertical",
        padding: "none",
        minHeight: "none",
        className: cn("overflow-hidden", className),
        ...props,
        children: [
          /* @__PURE__ */ jsxs(
            "button",
            {
              id: headerId,
              type: "button",
              onClick: handleToggle,
              onKeyDown: handleKeyDown,
              disabled,
              className: cn(
                "w-full cursor-pointer not-aria-expanded:rounded-xl aria-expanded:rounded-t-xl flex items-center justify-between gap-3 text-left transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-950 focus-visible:ring-inset pl-2 pr-10",
                disabled && "cursor-not-allowed text-text-400",
                triggerClassName
              ),
              "aria-expanded": isExpanded,
              "aria-controls": contentId,
              "aria-disabled": disabled,
              "data-value": value,
              children: [
                trigger,
                /* @__PURE__ */ jsx(
                  CaretRightIcon,
                  {
                    size: 20,
                    className: cn(
                      "transition-transform duration-200 flex-shrink-0",
                      disabled ? "text-gray-400" : "text-text-700",
                      isExpanded ? "rotate-90" : "rotate-0"
                    ),
                    "data-testid": "accordion-caret"
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsx(
            "section",
            {
              id: contentId,
              "aria-labelledby": headerId,
              "aria-hidden": !isExpanded,
              className: cn(
                "transition-all duration-300 ease-in-out overflow-hidden",
                isExpanded ? "opacity-100" : "max-h-0 opacity-0"
              ),
              "data-testid": "accordion-content",
              "data-value": value,
              children: /* @__PURE__ */ jsx("div", { className: cn("p-4 pt-0", contentClassName), children })
            }
          )
        ]
      }
    );
  }
);
CardAccordation.displayName = "CardAccordation";

export {
  CardAccordation
};
//# sourceMappingURL=chunk-2ACDTDO4.mjs.map