@vector-business-services/cristal-ds-web 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -6,15 +6,26 @@ var react$1 = require('@phosphor-icons/react');
 var jsxRuntime = require('react/jsx-runtime');
 var badge = require('primereact/badge');
 var button = require('primereact/button');
+var card = require('primereact/card');
+var checkbox = require('primereact/checkbox');
 var chip = require('primereact/chip');
 var divider = require('primereact/divider');
+var sidebar = require('primereact/sidebar');
 var inputtext = require('primereact/inputtext');
 var api = require('primereact/api');
 var menu = require('primereact/menu');
 var menubar = require('primereact/menubar');
 var avatar = require('primereact/avatar');
 var tooltip = require('primereact/tooltip');
+var dialog = require('primereact/dialog');
 var multiselect = require('primereact/multiselect');
+var panel = require('primereact/panel');
+var radiobutton = require('primereact/radiobutton');
+var scrollpanel = require('primereact/scrollpanel');
+var selectbutton = require('primereact/selectbutton');
+var dropdown = require('primereact/dropdown');
+var inputswitch = require('primereact/inputswitch');
+var tabview = require('primereact/tabview');
 var tag = require('primereact/tag');
 
 // src/components/AutoComplete/AutoComplete.tsx
@@ -124,6 +135,93 @@ var Button = react.forwardRef(function Button2({
     }
   );
 });
+var Card = react.forwardRef(function Card2({ padding = "xsmall", outline = false, className, style, children, ...props }, ref) {
+  const classes = ["cr-card", `cr-card--${padding}`, outline && "cr-card--outline", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    card.Card,
+    {
+      unstyled: true,
+      ref,
+      pt: {
+        root: { className: classes, style },
+        body: { className: "cr-card__body" },
+        content: { className: "cr-card__content" }
+      },
+      ...props,
+      children
+    }
+  );
+});
+var Checkbox = react.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 = react.useId();
+  const inputId = id ?? autoId;
+  const inputRef = react.useRef(null);
+  const setInputRef = react.useCallback(
+    (input) => {
+      inputRef.current = input;
+      if (typeof ref === "function") ref(input);
+      else if (ref) ref.current = input;
+    },
+    [ref]
+  );
+  react.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__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      checkbox.Checkbox,
+      {
+        unstyled: true,
+        inputRef: setInputRef,
+        inputId,
+        checked,
+        onChange,
+        disabled,
+        required,
+        name,
+        value,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.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__ */ jsxRuntime.jsx(
+      "label",
+      {
+        className: `cr-checkbox__label${showLabel ? "" : " cr-checkbox__label--hidden"}`,
+        htmlFor: inputId,
+        children: label
+      }
+    )
+  ] });
+});
 var Chip = react.forwardRef(function Chip2({
   label,
   variant = "default",
@@ -215,6 +313,135 @@ var IconButton = react.forwardRef(function IconButton2({ variant = "primary", si
     }
   );
 });
+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",
+  onBack,
+  backLabel = "Voltar",
+  closeLabel = "Fechar",
+  footer,
+  children,
+  id,
+  className
+}) {
+  const autoId = react.useId();
+  const titleId = `${autoId}-title`;
+  const subtitleId = `${autoId}-subtitle`;
+  const panelRef = react.useRef(null);
+  const retorno = react.useRef(null);
+  react.useEffect(() => {
+    if (visible) {
+      retorno.current = document.activeElement;
+      return;
+    }
+    retorno.current?.focus();
+    retorno.current = null;
+  }, [visible]);
+  const [rolagem, setRolagem] = react.useState(null);
+  const [rolavel, setRolavel] = react.useState(false);
+  react.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 (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__ */ jsxRuntime.jsx(
+    sidebar.Sidebar,
+    {
+      unstyled: true,
+      id,
+      visible,
+      onHide,
+      position: side,
+      blockScroll: true,
+      pt: {
+        mask: { className: `cr-drawer__mask cr-drawer__mask--${side}` },
+        root: {
+          className: classes,
+          role: "dialog",
+          "aria-modal": true,
+          "aria-labelledby": titleId,
+          "aria-describedby": subtitle ? subtitleId : void 0,
+          onKeyDown: prenderFoco
+        }
+      },
+      content: ({ closeIconRef, hide }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "cr-drawer__header", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-drawer__title-row", children: [
+                onBack && /* @__PURE__ */ jsxRuntime.jsx(
+                  IconButton,
+                  {
+                    variant: "tertiary",
+                    size: "xsmall",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowLeft, {}),
+                    "aria-label": backLabel,
+                    onClick: onBack
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "cr-drawer__title", children: title })
+              ] }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { id: subtitleId, className: "cr-drawer__subtitle", children: subtitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: behavior === "fixed" ? setRolagem : void 0,
+                className: "cr-drawer__body",
+                tabIndex: behavior === "fixed" && rolavel ? 0 : void 0,
+                children
+              }
+            ),
+            footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-drawer__footer", children: footer }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton,
+              {
+                ref: closeIconRef,
+                className: "cr-drawer__close",
+                variant: "tertiary",
+                size: "xsmall",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.X, {}),
+                "aria-label": closeLabel,
+                onClick: (event) => hide(event)
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 var Input = react.forwardRef(function Input2({
   variant = "outline",
   size = "large",
@@ -603,6 +830,96 @@ var Menubar = react.forwardRef(function Menubar2({
     }
   ) });
 });
+function Modal({
+  visible,
+  onHide,
+  title,
+  size = "large",
+  onHelp,
+  helpLabel = "Ajuda",
+  closeLabel = "Fechar",
+  footer,
+  footerStart,
+  children,
+  id,
+  className
+}) {
+  const autoId = react.useId();
+  const titleId = `${autoId}-title`;
+  const [body, setBody] = react.useState(null);
+  const [rolavel, setRolavel] = react.useState(false);
+  react.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__ */ jsxRuntime.jsx(
+    dialog.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-modal__header", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "cr-modal__title", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-modal__tools", children: [
+            onHelp && size !== "large" && /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton,
+              {
+                variant: "tertiary",
+                size: "xsmall",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.Question, {}),
+                "aria-label": helpLabel,
+                onClick: onHelp
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton,
+              {
+                ref: closeRef,
+                variant: "tertiary",
+                size: "xsmall",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.X, {}),
+                "aria-label": closeLabel,
+                onClick: (event) => hide(event)
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setBody,
+            className: "cr-modal__body",
+            tabIndex: rolavel ? 0 : void 0,
+            children
+          }
+        ),
+        (footer || footerStart) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-modal__footer", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-modal__footer-start", children: footerStart }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cr-modal__footer-end", children: footer })
+        ] })
+      ] })
+    }
+  );
+}
 var MultiSelect = react.forwardRef(function MultiSelect2({
   variant = "outline",
   size = "large",
@@ -782,6 +1099,402 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
     ] })
   ] });
 });
+var Panel = react.forwardRef(function Panel2({ className, style, children, ...props }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    panel.Panel,
+    {
+      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 = react.forwardRef(function Radio2({
+  label,
+  showLabel = true,
+  labelSize = "default",
+  checked = false,
+  value,
+  name,
+  onChange,
+  disabled,
+  required,
+  id,
+  className,
+  style
+}, ref) {
+  const autoId = react.useId();
+  const inputId = id ?? autoId;
+  const classes = [
+    "cr-radio",
+    `cr-radio--label-${labelSize}`,
+    disabled && "cr-radio--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radiobutton.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__ */ jsxRuntime.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 = react.forwardRef(function ScrollPanel2({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, id, className }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const contentId = `${react.useId()}-content`;
+  const [posicao, setPosicao] = react.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__ */ jsxRuntime.jsx(scrollpanel.ScrollPanel, { unstyled: true, ref: primeRef, id, pt, children });
+});
+var SegmentControl = react.forwardRef(
+  function SegmentControl2({
+    options,
+    value,
+    onChange,
+    variant = "primary",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    disabled,
+    id,
+    className
+  }, ref) {
+    const primeRef = react.useRef(null);
+    react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+    const classes = ["cr-segment", `cr-segment--${variant}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      selectbutton.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-segment__icon", "aria-hidden": "true", children: option.icon }),
+          /* @__PURE__ */ jsxRuntime.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 = react.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 = react.useId();
+  const inputId = id ?? autoId;
+  const hintId = `${inputId}-hint`;
+  const listId = `${inputId}-list`;
+  const supportText = error ?? hint;
+  const [open, setOpen] = react.useState(false);
+  const setInputRef = react.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__ */ jsxRuntime.jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dropdown.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__ */ jsxRuntime.jsx("span", { className: "cr-select__placeholder", children: placeholder }) : String(option[optionLabel] ?? option),
+        scrollHeight: "185px",
+        dropdownIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDown, {}),
+        collapseIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.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__ */ jsxRuntime.jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsxRuntime.jsx(react$1.WarningCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Info, {}) }),
+      supportText
+    ] })
+  ] });
+});
+var Switch = react.forwardRef(function Switch2({
+  label,
+  showLabel = true,
+  labelPosition = "right",
+  size = "medium",
+  checked = false,
+  onChange,
+  disabled,
+  name,
+  id,
+  className,
+  style
+}, ref) {
+  const autoId = react.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__ */ jsxRuntime.jsxs("div", { className: classes, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      inputswitch.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__ */ jsxRuntime.jsx(
+      "label",
+      {
+        className: `cr-switch__label${showLabel ? "" : " cr-switch__label--hidden"}`,
+        htmlFor: inputId,
+        children: label
+      }
+    )
+  ] });
+});
+function TabPanel(_props) {
+  return null;
+}
+var Tabs = react.forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, className }, ref) {
+  const primeRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const [interno, setInterno] = react.useState(0);
+  const ativa = activeIndex ?? interno;
+  const panels = react.Children.toArray(children).filter(
+    (child) => react.isValidElement(child)
+  );
+  const header = (panel) => function TabHeader(options) {
+    const element = options.element;
+    const close = panel.onClose;
+    return react.cloneElement(
+      element,
+      {
+        "aria-keyshortcuts": close ? "Delete" : void 0,
+        onKeyDown: (event) => {
+          if (close && event.key === "Delete") close();
+          else element.props.onKeyDown?.(event);
+        }
+      },
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        panel.leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-tabs__icon", "aria-hidden": "true", children: panel.leftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-tabs__label", children: panel.header }),
+        panel.badge !== void 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "cr-tabs__close",
+            "aria-hidden": "true",
+            onClick: (event) => {
+              event.stopPropagation();
+              close();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.X, {})
+          }
+        )
+      ] })
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabview.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__ */ jsxRuntime.jsx(
+        tabview.TabPanel,
+        {
+          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 = react.forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
   const primeRef = react.useRef(null);
   react.useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -802,13 +1515,25 @@ var Tag = react.forwardRef(function Tag2({ variant = "default", size = "small",
 exports.AutoComplete = AutoComplete;
 exports.Badge = Badge;
 exports.Button = Button;
+exports.Card = Card;
+exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.Divider = Divider;
+exports.Drawer = Drawer;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Menu = Menu;
 exports.Menubar = Menubar;
+exports.Modal = Modal;
 exports.MultiSelect = MultiSelect;
+exports.Panel = Panel;
+exports.Radio = Radio;
+exports.ScrollPanel = ScrollPanel;
+exports.SegmentControl = SegmentControl;
+exports.Select = Select;
+exports.Switch = Switch;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=index.cjs.map