@vector-business-services/cristal-ds-web 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,19 +1,29 @@
-import { forwardRef, useId, useRef, useImperativeHandle, useContext, useState, useEffect } from 'react';
+import { forwardRef, useId, useRef, useImperativeHandle, useCallback, useEffect, useContext, useState, Children, isValidElement, cloneElement } from 'react';
 import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
-import { WarningCircle, Info, CircleNotch, Check, CaretDown, MagnifyingGlass, X, List } from '@phosphor-icons/react';
+import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, CaretUp, X, List, ArrowLeft, Question } from '@phosphor-icons/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Badge as Badge$1 } from 'primereact/badge';
 import { Button as Button$1 } from 'primereact/button';
 import { Card as Card$1 } from 'primereact/card';
+import { Checkbox as Checkbox$1 } from 'primereact/checkbox';
 import { Chip as Chip$1 } from 'primereact/chip';
 import { Divider as Divider$1 } from 'primereact/divider';
+import { Sidebar } from 'primereact/sidebar';
 import { InputText } from 'primereact/inputtext';
 import { PrimeReactContext, PrimeReactProvider } from 'primereact/api';
 import { Menu as Menu$1 } from 'primereact/menu';
 import { Menubar as Menubar$1 } from 'primereact/menubar';
 import { Avatar } from 'primereact/avatar';
 import { Tooltip as Tooltip$1 } from 'primereact/tooltip';
+import { Dialog } from 'primereact/dialog';
 import { MultiSelect as MultiSelect$1 } from 'primereact/multiselect';
+import { Panel as Panel$1 } from 'primereact/panel';
+import { RadioButton } from 'primereact/radiobutton';
+import { ScrollPanel as ScrollPanel$1 } from 'primereact/scrollpanel';
+import { SelectButton } from 'primereact/selectbutton';
+import { Dropdown } from 'primereact/dropdown';
+import { InputSwitch } from 'primereact/inputswitch';
+import { TabView, TabPanel as TabPanel$1 } from 'primereact/tabview';
 import { Tag as Tag$1 } from 'primereact/tag';
 
 // src/components/AutoComplete/AutoComplete.tsx
@@ -140,6 +150,76 @@ var Card = forwardRef(function Card2({ padding = "xsmall", outline = false, clas
     }
   );
 });
+var Checkbox = forwardRef(function Checkbox2({
+  label,
+  showLabel = true,
+  position = "left",
+  labelSize = "default",
+  checked = false,
+  indeterminate = false,
+  onChange,
+  disabled,
+  required,
+  name,
+  value,
+  id,
+  className,
+  style
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const inputRef = useRef(null);
+  const setInputRef = useCallback(
+    (input) => {
+      inputRef.current = input;
+      if (typeof ref === "function") ref(input);
+      else if (ref) ref.current = input;
+    },
+    [ref]
+  );
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate && !checked;
+  }, [indeterminate, checked]);
+  const classes = [
+    "cr-checkbox",
+    `cr-checkbox--${position}`,
+    `cr-checkbox--label-${labelSize}`,
+    indeterminate && !checked && "cr-checkbox--indeterminate",
+    disabled && "cr-checkbox--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+    /* @__PURE__ */ jsx(
+      Checkbox$1,
+      {
+        unstyled: true,
+        inputRef: setInputRef,
+        inputId,
+        checked,
+        onChange,
+        disabled,
+        required,
+        name,
+        value,
+        icon: /* @__PURE__ */ jsx(Check, { size: 16 }),
+        pt: {
+          root: { className: "cr-checkbox__control" },
+          input: { className: "cr-checkbox__input" },
+          box: { className: "cr-checkbox__box" },
+          icon: { className: "cr-checkbox__icon", "aria-hidden": true }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: `cr-checkbox__label${showLabel ? "" : " cr-checkbox__label--hidden"}`,
+        htmlFor: inputId,
+        children: label
+      }
+    )
+  ] });
+});
 var Chip = forwardRef(function Chip2({
   label,
   variant = "default",
@@ -231,6 +311,149 @@ var IconButton = forwardRef(function IconButton2({ variant = "primary", size = "
     }
   );
 });
+var FOCAVEIS = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Drawer({
+  visible,
+  onHide,
+  title,
+  subtitle,
+  side = "right",
+  behavior = "full",
+  modal = true,
+  onBack,
+  backLabel = "Voltar",
+  closeLabel = "Fechar",
+  footer,
+  children,
+  id,
+  className
+}) {
+  const autoId = useId();
+  const titleId = `${autoId}-title`;
+  const subtitleId = `${autoId}-subtitle`;
+  const panelRef = useRef(null);
+  const retorno = useRef(null);
+  useEffect(() => {
+    if (visible) {
+      retorno.current = document.activeElement;
+      return;
+    }
+    retorno.current?.focus();
+    retorno.current = null;
+  }, [visible]);
+  const [rolagem, setRolagem] = useState(null);
+  const [rolavel, setRolavel] = useState(false);
+  useEffect(() => {
+    if (!rolagem) return;
+    const medir = () => setRolavel(rolagem.scrollHeight > rolagem.clientHeight);
+    medir();
+    const observer = new ResizeObserver(medir);
+    observer.observe(rolagem);
+    [...rolagem.children].forEach((child) => observer.observe(child));
+    return () => observer.disconnect();
+  }, [rolagem, children]);
+  const prenderFoco = (event) => {
+    if (!modal || event.key !== "Tab" || !panelRef.current) return;
+    const focaveis = [...panelRef.current.querySelectorAll(FOCAVEIS)];
+    const primeiro = focaveis[0];
+    const ultimo = focaveis[focaveis.length - 1];
+    if (!primeiro || !ultimo) return;
+    if (event.shiftKey && document.activeElement === primeiro) {
+      event.preventDefault();
+      ultimo.focus();
+    } else if (!event.shiftKey && document.activeElement === ultimo) {
+      event.preventDefault();
+      primeiro.focus();
+    }
+  };
+  const classes = ["cr-drawer", `cr-drawer--${side}`, `cr-drawer--${behavior}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Sidebar,
+    {
+      unstyled: true,
+      id,
+      visible,
+      onHide,
+      position: side,
+      modal,
+      blockScroll: modal,
+      dismissable: modal,
+      pt: {
+        mask: {
+          className: `cr-drawer__mask cr-drawer__mask--${side}${modal ? "" : " cr-drawer__mask--sem-overlay"}`
+        },
+        root: {
+          className: classes,
+          role: "dialog",
+          "aria-modal": modal || void 0,
+          "aria-labelledby": titleId,
+          "aria-describedby": subtitle ? subtitleId : void 0,
+          onKeyDown: prenderFoco
+        },
+        // No unstyled o Prime não põe classes na transição: o Cristal dá as dele (Drawer.css).
+        // O tipo do Prime exige o addEndListener do react-transition-group, que aqui não se usa.
+        transition: {
+          classNames: {
+            enter: "cr-drawer--enter",
+            enterActive: "cr-drawer--enter-active",
+            exitActive: "cr-drawer--exit-active"
+          }
+        }
+      },
+      content: ({ closeIconRef, hide }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (element) => {
+            panelRef.current = element;
+            if (behavior === "full") setRolagem(element);
+          },
+          className: "cr-drawer__panel",
+          tabIndex: behavior === "full" && rolavel ? 0 : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "cr-drawer__header", children: [
+              /* @__PURE__ */ jsxs("div", { className: "cr-drawer__title-row", children: [
+                onBack && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    variant: "tertiary",
+                    size: "xsmall",
+                    icon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+                    "aria-label": backLabel,
+                    onClick: onBack
+                  }
+                ),
+                /* @__PURE__ */ jsx("h2", { id: titleId, className: "cr-drawer__title", children: title })
+              ] }),
+              subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: "cr-drawer__subtitle", children: subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: behavior === "fixed" ? setRolagem : void 0,
+                className: "cr-drawer__body",
+                tabIndex: behavior === "fixed" && rolavel ? 0 : void 0,
+                children
+              }
+            ),
+            footer && /* @__PURE__ */ jsx("div", { className: "cr-drawer__footer", children: footer }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ref: closeIconRef,
+                className: "cr-drawer__close",
+                variant: "tertiary",
+                size: "xsmall",
+                icon: /* @__PURE__ */ jsx(X, {}),
+                "aria-label": closeLabel,
+                onClick: (event) => hide(event)
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 var Input = forwardRef(function Input2({
   variant = "outline",
   size = "large",
@@ -619,6 +842,96 @@ var Menubar = forwardRef(function Menubar2({
     }
   ) });
 });
+function Modal({
+  visible,
+  onHide,
+  title,
+  size = "large",
+  onHelp,
+  helpLabel = "Ajuda",
+  closeLabel = "Fechar",
+  footer,
+  footerStart,
+  children,
+  id,
+  className
+}) {
+  const autoId = useId();
+  const titleId = `${autoId}-title`;
+  const [body, setBody] = useState(null);
+  const [rolavel, setRolavel] = useState(false);
+  useEffect(() => {
+    if (!body) return;
+    const medir = () => setRolavel(body.scrollHeight > body.clientHeight);
+    medir();
+    const observer = new ResizeObserver(medir);
+    observer.observe(body);
+    [...body.children].forEach((child) => observer.observe(child));
+    return () => observer.disconnect();
+  }, [body, children]);
+  const classes = ["cr-modal", `cr-modal--${size}`, rolavel && "cr-modal--scrollable", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      unstyled: true,
+      id,
+      visible,
+      onHide,
+      draggable: false,
+      resizable: false,
+      blockScroll: true,
+      pt: {
+        mask: { className: "cr-modal__mask" },
+        root: {
+          className: classes,
+          "aria-labelledby": titleId,
+          "aria-describedby": void 0
+        }
+      },
+      content: ({ hide, closeRef }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "cr-modal__header", children: [
+          /* @__PURE__ */ jsx("h2", { id: titleId, className: "cr-modal__title", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "cr-modal__tools", children: [
+            onHelp && size !== "large" && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "tertiary",
+                size: "xsmall",
+                icon: /* @__PURE__ */ jsx(Question, {}),
+                "aria-label": helpLabel,
+                onClick: onHelp
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ref: closeRef,
+                variant: "tertiary",
+                size: "xsmall",
+                icon: /* @__PURE__ */ jsx(X, {}),
+                "aria-label": closeLabel,
+                onClick: (event) => hide(event)
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setBody,
+            className: "cr-modal__body",
+            tabIndex: rolavel ? 0 : void 0,
+            children
+          }
+        ),
+        (footer || footerStart) && /* @__PURE__ */ jsxs("div", { className: "cr-modal__footer", children: [
+          /* @__PURE__ */ jsx("div", { className: "cr-modal__footer-start", children: footerStart }),
+          /* @__PURE__ */ jsx("div", { className: "cr-modal__footer-end", children: footer })
+        ] })
+      ] })
+    }
+  );
+}
 var MultiSelect = forwardRef(function MultiSelect2({
   variant = "outline",
   size = "large",
@@ -798,6 +1111,402 @@ var MultiSelect = forwardRef(function MultiSelect2({
     ] })
   ] });
 });
+var Panel = forwardRef(function Panel2({ className, style, children, ...props }, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => primeRef.current?.getElement());
+  return /* @__PURE__ */ jsx(
+    Panel$1,
+    {
+      unstyled: true,
+      ref: primeRef,
+      pt: {
+        root: { className: ["cr-panel", className].filter(Boolean).join(" "), style },
+        toggleableContent: {
+          className: "cr-panel__body",
+          role: void 0,
+          "aria-labelledby": void 0
+        },
+        content: { className: "cr-panel__content" }
+      },
+      ...props,
+      children
+    }
+  );
+});
+var Radio = forwardRef(function Radio2({
+  label,
+  showLabel = true,
+  labelSize = "default",
+  checked = false,
+  value,
+  name,
+  onChange,
+  disabled,
+  required,
+  id,
+  className,
+  style
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const classes = [
+    "cr-radio",
+    `cr-radio--label-${labelSize}`,
+    disabled && "cr-radio--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+    /* @__PURE__ */ jsx(
+      RadioButton,
+      {
+        unstyled: true,
+        inputRef: ref,
+        inputId,
+        checked,
+        value,
+        name,
+        onChange,
+        disabled,
+        required,
+        pt: {
+          root: { className: "cr-radio__control" },
+          input: { className: "cr-radio__input" },
+          box: { className: "cr-radio__box" },
+          icon: { className: "cr-radio__icon" }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: `cr-radio__label${showLabel ? "" : " cr-radio__label--hidden"}`,
+        htmlFor: inputId,
+        children: label
+      }
+    )
+  ] });
+});
+var porcentagem = (posicao, total, visivel) => total > visivel ? Math.round(posicao / (total - visivel) * 100) : 0;
+var ScrollPanel = forwardRef(function ScrollPanel2({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, id, className }, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const contentId = `${useId()}-content`;
+  const [posicao, setPosicao] = useState({ x: 0, y: 0 });
+  const aoRolar = (event) => {
+    const el = event.currentTarget;
+    setPosicao({
+      x: porcentagem(el.scrollLeft, el.scrollWidth, el.clientWidth),
+      y: porcentagem(el.scrollTop, el.scrollHeight, el.clientHeight)
+    });
+  };
+  const barra = (orientacao, valor) => ({
+    className: `cr-scrollpanel__bar cr-scrollpanel__bar--${orientacao}`,
+    tabIndex: -1,
+    "aria-controls": contentId,
+    "aria-valuenow": valor,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100
+  });
+  const pt = {
+    root: { className: ["cr-scrollpanel", className].filter(Boolean).join(" "), style },
+    wrapper: { className: "cr-scrollpanel__wrapper" },
+    content: {
+      id: contentId,
+      className: "cr-scrollpanel__content",
+      tabIndex: 0,
+      role: "region",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      onScroll: aoRolar
+    },
+    barx: barra("horizontal", posicao.x),
+    bary: barra("vertical", posicao.y)
+  };
+  return /* @__PURE__ */ jsx(ScrollPanel$1, { unstyled: true, ref: primeRef, id, pt, children });
+});
+var SegmentControl = forwardRef(
+  function SegmentControl2({
+    options,
+    value,
+    onChange,
+    variant = "primary",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    disabled,
+    id,
+    className
+  }, ref) {
+    const primeRef = useRef(null);
+    useImperativeHandle(ref, () => primeRef.current?.getElement());
+    const classes = ["cr-segment", `cr-segment--${variant}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      SelectButton,
+      {
+        unstyled: true,
+        ref: primeRef,
+        id,
+        options,
+        optionLabel: "label",
+        optionValue: "value",
+        optionDisabled: "disabled",
+        value,
+        onChange: (event) => {
+          if (event.value != null) onChange?.(event.value);
+        },
+        allowEmpty: false,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        itemTemplate: (option) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          option.icon && /* @__PURE__ */ jsx("span", { className: "cr-segment__icon", "aria-hidden": "true", children: option.icon }),
+          /* @__PURE__ */ jsx("span", { className: "cr-segment__label", children: option.label })
+        ] }),
+        pt: {
+          root: { className: classes },
+          button: {
+            className: "cr-segment__item",
+            // O Prime só ativa com a barra de espaço; um role=button responde também ao Enter.
+            onKeyDown: (event) => {
+              if (event.key === "Enter") event.currentTarget.click();
+            }
+          }
+        }
+      }
+    );
+  }
+);
+var Select = forwardRef(function Select2({
+  variant = "outline",
+  size = "large",
+  label,
+  "aria-label": ariaLabel,
+  options,
+  optionLabel = "label",
+  optionValue,
+  value,
+  onChange,
+  placeholder = "Selecione uma op\xE7\xE3o",
+  hint,
+  error,
+  required,
+  disabled,
+  id,
+  name,
+  className
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const hintId = `${inputId}-hint`;
+  const listId = `${inputId}-list`;
+  const supportText = error ?? hint;
+  const [open, setOpen] = useState(false);
+  const setInputRef = useCallback(
+    (input) => {
+      input?.setAttribute("role", "combobox");
+      if (typeof ref === "function") ref(input);
+      else if (ref) ref.current = input;
+    },
+    [ref]
+  );
+  const classes = [
+    "cr-field",
+    `cr-field--${variant}`,
+    `cr-field--${size}`,
+    "cr-select",
+    error && "cr-field--error",
+    disabled && "cr-field--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const pt = {
+    root: {
+      className: `cr-field__control cr-select__control${open ? " cr-select__control--open" : ""}`,
+      // O Prime aponta para um item mesmo sem destaque (dropdownItem_-1); o foco vai no item.
+      "aria-activedescendant": void 0
+    },
+    // O <select> escondido do Prime só existe para formulários: fora da árvore de acessibilidade.
+    select: { "aria-hidden": true },
+    hiddenSelectedMessage: { className: "cr-select__hidden" },
+    // O Prime usa a mesma chave no texto do campo e no combobox escondido.
+    input: { className: "cr-select__value" },
+    trigger: { className: "cr-field__icon cr-select__trigger", "aria-hidden": true },
+    panel: { className: "cr-select__panel" },
+    wrapper: { className: "cr-select__wrapper" },
+    list: { className: "cr-select__list", id: listId },
+    item: { className: "cr-select__item" },
+    emptyMessage: { className: "cr-select__item cr-select__empty" }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        unstyled: true,
+        inputId,
+        focusInputRef: setInputRef,
+        value,
+        options,
+        optionLabel,
+        optionValue,
+        onChange: (event) => onChange?.(event.value),
+        onShow: () => setOpen(true),
+        onHide: () => setOpen(false),
+        disabled,
+        required,
+        name,
+        invalid: Boolean(error),
+        placeholder,
+        valueTemplate: (option) => option == null ? /* @__PURE__ */ jsx("span", { className: "cr-select__placeholder", children: placeholder }) : String(option[optionLabel] ?? option),
+        scrollHeight: "185px",
+        dropdownIcon: /* @__PURE__ */ jsx(CaretDown, {}),
+        collapseIcon: /* @__PURE__ */ jsx(CaretUp, {}),
+        "aria-label": label ? void 0 : ariaLabel,
+        "aria-expanded": open,
+        "aria-controls": open ? listId : void 0,
+        "aria-describedby": supportText ? hintId : void 0,
+        "aria-invalid": error ? true : void 0,
+        "aria-required": required || void 0,
+        pt
+      }
+    ),
+    supportText && /* @__PURE__ */ jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsx(WarningCircle, {}) : /* @__PURE__ */ jsx(Info, {}) }),
+      supportText
+    ] })
+  ] });
+});
+var Switch = forwardRef(function Switch2({
+  label,
+  showLabel = true,
+  labelPosition = "right",
+  size = "medium",
+  checked = false,
+  onChange,
+  disabled,
+  name,
+  id,
+  className,
+  style
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const classes = [
+    "cr-switch",
+    `cr-switch--${size}`,
+    `cr-switch--label-${labelPosition}`,
+    disabled && "cr-switch--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+    /* @__PURE__ */ jsx(
+      InputSwitch,
+      {
+        unstyled: true,
+        inputRef: ref,
+        inputId,
+        checked,
+        onChange,
+        disabled,
+        name,
+        pt: {
+          root: { className: "cr-switch__control", role: void 0, "aria-checked": void 0 },
+          input: { className: "cr-switch__input" },
+          slider: { className: "cr-switch__track" }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: `cr-switch__label${showLabel ? "" : " cr-switch__label--hidden"}`,
+        htmlFor: inputId,
+        children: label
+      }
+    )
+  ] });
+});
+function TabPanel(_props) {
+  return null;
+}
+var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, className }, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const [interno, setInterno] = useState(0);
+  const ativa = activeIndex ?? interno;
+  const panels = Children.toArray(children).filter(
+    (child) => isValidElement(child)
+  );
+  const header = (panel) => function TabHeader(options) {
+    const element = options.element;
+    const close = panel.onClose;
+    return cloneElement(
+      element,
+      {
+        "aria-keyshortcuts": close ? "Delete" : void 0,
+        onKeyDown: (event) => {
+          if (close && event.key === "Delete") close();
+          else element.props.onKeyDown?.(event);
+        }
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        panel.leftIcon && /* @__PURE__ */ jsx("span", { className: "cr-tabs__icon", "aria-hidden": "true", children: panel.leftIcon }),
+        /* @__PURE__ */ jsx("span", { className: "cr-tabs__label", children: panel.header }),
+        panel.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { className: "cr-tabs__badge", children: panel.badge }),
+        close && // O X é só para o mouse: pelo teclado a aba fecha com Delete (aria-keyshortcuts).
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "cr-tabs__close",
+            "aria-hidden": "true",
+            onClick: (event) => {
+              event.stopPropagation();
+              close();
+            },
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        )
+      ] })
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    TabView,
+    {
+      unstyled: true,
+      ref: primeRef,
+      id,
+      activeIndex: ativa,
+      onTabChange: (event) => {
+        setInterno(event.index);
+        onTabChange?.(event.index);
+      },
+      pt: {
+        root: { className: ["cr-tabs", className].filter(Boolean).join(" ") },
+        navContainer: { className: "cr-tabs__nav-container" },
+        navContent: { className: "cr-tabs__nav-content" },
+        nav: { className: "cr-tabs__nav" },
+        inkbar: { className: "cr-tabs__inkbar" },
+        panelContainer: { className: "cr-tabs__panels" }
+      },
+      children: panels.map((panel, index) => /* @__PURE__ */ jsx(
+        TabPanel$1,
+        {
+          header: panel.props.header,
+          disabled: panel.props.disabled,
+          headerTemplate: header(panel.props),
+          pt: {
+            header: { className: "cr-tabs__item" },
+            headerAction: { className: "cr-tabs__tab" },
+            content: { className: "cr-tabs__panel" }
+          },
+          children: panel.props.children
+        },
+        panel.key ?? index
+      ))
+    }
+  );
+});
 var Tag = forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -815,6 +1524,6 @@ var Tag = forwardRef(function Tag2({ variant = "default", size = "small", icon,
   );
 });
 
-export { AutoComplete, Badge, Button, Card, Chip, Divider, IconButton, Input, Menu, Menubar, MultiSelect, Tag, Tooltip };
+export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map