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

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

// src/components/ActivityPreview/ActivityPreview.tsx
import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef5, useState as useState8 } from "react";
import { File, DownloadSimple, Trash } from "phosphor-react";

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function getSubjectColorWithOpacity(hexColor, isDark) {
  if (!hexColor) return void 0;
  let color = hexColor.replace(/^#/, "").toLowerCase();
  if (isDark) {
    if (color.length === 8) {
      color = color.slice(0, 6);
    }
    return `#${color}`;
  } else {
    let resultColor;
    if (color.length === 6) {
      resultColor = `#${color}4d`;
    } else if (color.length === 8) {
      resultColor = `#${color}`;
    } else {
      resultColor = `#${color}`;
    }
    return resultColor;
  }
}

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

// src/components/Button/Button.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES = {
  solid: {
    primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
  },
  outline: {
    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
  },
  link: {
    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
    positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
    negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
  }
};
var SIZE_CLASSES = {
  "extra-small": "text-xs px-3.5 py-2",
  small: "text-sm px-4 py-2.5",
  medium: "text-md px-5 py-2.5",
  large: "text-lg px-6 py-3",
  "extra-large": "text-lg px-7 py-3.5"
};
var Button = ({
  children,
  iconLeft,
  iconRight,
  size = "medium",
  variant = "solid",
  action = "primary",
  className = "",
  disabled,
  type = "button",
  ...props
}) => {
  const sizeClasses = SIZE_CLASSES[size];
  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
  return /* @__PURE__ */ jsxs(
    "button",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      disabled,
      type,
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx2("span", { className: "mr-2 flex items-center", children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx2("span", { className: "ml-2 flex items-center", children: iconRight })
      ]
    }
  );
};
var Button_default = Button;

// src/components/Badge/Badge.tsx
import { Bell } from "phosphor-react";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES2 = {
  solid: {
    error: "bg-error-background text-error-700 focus-visible:outline-none",
    warning: "bg-warning text-warning-800 focus-visible:outline-none",
    success: "bg-success text-success-800 focus-visible:outline-none",
    info: "bg-info text-info-800 focus-visible:outline-none",
    muted: "bg-background-muted text-background-800 focus-visible:outline-none"
  },
  outlined: {
    error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
    warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
    success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
    info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
    muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
  },
  exams: {
    exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
  },
  examsOutlined: {
    exam1: "bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none",
    exam2: "bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none",
    exam3: "bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none",
    exam4: "bg-exam-4 text-success-700 border border-success-700 focus-visible:outline-none"
  },
  resultStatus: {
    negative: "bg-error text-error-800 focus-visible:outline-none",
    positive: "bg-success text-success-800 focus-visible:outline-none"
  },
  notification: "text-primary"
};
var SIZE_CLASSES2 = {
  small: "text-2xs px-2 py-1",
  medium: "text-xs px-2 py-1",
  large: "text-sm px-2 py-1"
};
var SIZE_CLASSES_ICON = {
  small: "size-3",
  medium: "size-3.5",
  large: "size-4"
};
var Badge = ({
  children,
  iconLeft,
  iconRight,
  size = "medium",
  variant = "solid",
  action = "error",
  className = "",
  notificationActive = false,
  ...props
}) => {
  const sizeClasses = SIZE_CLASSES2[size];
  const sizeClassesIcon = SIZE_CLASSES_ICON[size];
  const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
  const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
  const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
  const baseClassesIcon = "flex items-center";
  if (variant === "notification") {
    return /* @__PURE__ */ jsxs2(
      "div",
      {
        className: cn(baseClasses, variantClasses, sizeClasses, className),
        ...props,
        children: [
          /* @__PURE__ */ jsx3(Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
          notificationActive && /* @__PURE__ */ jsx3(
            "span",
            {
              "data-testid": "notification-dot",
              className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
            }
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ jsxs2(
    "div",
    {
      className: cn(baseClasses, variantClasses, sizeClasses, className),
      ...props,
      children: [
        iconLeft && /* @__PURE__ */ jsx3("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
        children,
        iconRight && /* @__PURE__ */ jsx3("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
      ]
    }
  );
};
var Badge_default = Badge;

// src/components/LatexRenderer/LatexRenderer.tsx
import "katex/dist/katex.min.css";
import { InlineMath, BlockMath } from "react-katex";
import DOMPurify from "dompurify";
import parse, {
  Element
} from "html-react-parser";
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var sanitizeHtml = (value) => {
  return DOMPurify.sanitize(value, {
    ADD_ATTR: ["data-latex", "data-display-mode", "data-math", "data-math-id"]
  });
};
var decodeHtmlEntities = (str) => {
  const textarea = document.createElement("textarea");
  textarea.innerHTML = str;
  return textarea.value;
};
var cleanLatex = (str) => {
  return str.replaceAll(/[\u200B-\u200D\uFEFF]/g, "").trim();
};
var createMathReplacer = (mathParts, errorRenderer) => {
  return (domNode) => {
    if (domNode instanceof Element && domNode.name === "span" && domNode.attribs["data-math-id"]) {
      const mathId = Number.parseInt(domNode.attribs["data-math-id"], 10);
      const mathPart = mathParts[mathId];
      if (!mathPart) return domNode;
      if (mathPart.type === "inline") {
        return /* @__PURE__ */ jsx4(
          InlineMath,
          {
            math: mathPart.latex,
            renderError: () => errorRenderer(mathPart.latex)
          },
          `math-${mathId}`
        );
      } else {
        return /* @__PURE__ */ jsx4("div", { className: "my-2.5 text-center", children: /* @__PURE__ */ jsx4(
          BlockMath,
          {
            math: mathPart.latex,
            renderError: () => errorRenderer(mathPart.latex)
          }
        ) }, `math-${mathId}`);
      }
    }
    return domNode;
  };
};
var LatexRenderer = ({
  content,
  className,
  style,
  onError
}) => {
  const renderContentWithMath = (htmlContent) => {
    if (!htmlContent) return null;
    let processedContent = htmlContent;
    const mathParts = [];
    const mathFormulaPattern = /<span[^>]*class="math-formula"[^>]*data-latex="([^"]*)"[^>]*>[\s\S]*?<\/span>/g;
    processedContent = processedContent.replaceAll(
      mathFormulaPattern,
      (match, latex) => {
        const isDisplayMode = match.includes('data-display-mode="true"');
        const id = mathParts.length;
        mathParts.push({
          id,
          type: isDisplayMode ? "block" : "inline",
          latex: cleanLatex(decodeHtmlEntities(latex))
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const wrappedMathPattern = /<span[^>]*class="math-expression"[^>]*data-math="([^"]*)"[^>]*>.*?<\/span>/g;
    processedContent = processedContent.replaceAll(
      wrappedMathPattern,
      (match, latex) => {
        const id = mathParts.length;
        mathParts.push({
          id,
          type: "inline",
          latex: cleanLatex(decodeHtmlEntities(latex))
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const doubleDollarPattern = /(?<!\\)\$\$([\s\S]+?)\$\$/g;
    processedContent = processedContent.replaceAll(
      doubleDollarPattern,
      (match, latex) => {
        const id = mathParts.length;
        mathParts.push({
          id,
          type: "block",
          latex: cleanLatex(latex)
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const singleDollarPattern = /(?<!\\)\$([\s\S]+?)\$/g;
    processedContent = processedContent.replaceAll(
      singleDollarPattern,
      (match, latex) => {
        const id = mathParts.length;
        mathParts.push({
          id,
          type: "inline",
          latex: cleanLatex(latex)
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const latexTagPattern = /(?:<latex>|&lt;latex&gt;)([\s\S]*?)(?:<\/latex>|&lt;\/latex&gt;)/g;
    processedContent = processedContent.replaceAll(
      latexTagPattern,
      (match, latex) => {
        const id = mathParts.length;
        mathParts.push({
          id,
          type: "inline",
          latex: cleanLatex(latex)
        });
        return `<span data-math-id="${id}"></span>`;
      }
    );
    const latexEnvPattern = /\\begin\{([^}]+)\}([\s\S]*?)\\end\{\1\}/g;
    processedContent = processedContent.replaceAll(latexEnvPattern, (match) => {
      const id = mathParts.length;
      mathParts.push({
        id,
        type: "block",
        latex: cleanLatex(match)
      });
      return `<span data-math-id="${id}"></span>`;
    });
    const sanitizedContent = sanitizeHtml(processedContent);
    const defaultErrorRenderer = (latex) => /* @__PURE__ */ jsxs3("span", { className: "text-red-600", children: [
      "Math Error: ",
      latex
    ] });
    const errorRenderer = onError || defaultErrorRenderer;
    const options = {
      replace: createMathReplacer(mathParts, errorRenderer)
    };
    return /* @__PURE__ */ jsx4(Fragment, { children: parse(sanitizedContent, options) });
  };
  return /* @__PURE__ */ jsx4(
    "div",
    {
      className: cn("whitespace-pre-wrap leading-relaxed", className),
      style,
      children: renderContentWithMath(content)
    }
  );
};
var LatexRenderer_default = LatexRenderer;

// src/components/IconButton/IconButton.tsx
import { forwardRef } from "react";
import { jsx as jsx5 } from "react/jsx-runtime";
var IconButton = forwardRef(
  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
    const baseClasses = [
      "inline-flex",
      "items-center",
      "justify-center",
      "rounded-lg",
      "font-medium",
      "bg-transparent",
      "text-text-950",
      "cursor-pointer",
      "hover:bg-primary-600",
      "hover:text-text",
      "focus-visible:outline-none",
      "focus-visible:ring-2",
      "focus-visible:ring-offset-0",
      "focus-visible:ring-indicator-info",
      "disabled:opacity-50",
      "disabled:cursor-not-allowed",
      "disabled:pointer-events-none"
    ];
    const sizeClasses = {
      sm: ["w-6", "h-6", "text-sm"],
      md: ["w-10", "h-10", "text-base"]
    };
    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
    const allClasses = [
      ...baseClasses,
      ...sizeClasses[size],
      ...activeClasses
    ].join(" ");
    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
    return /* @__PURE__ */ jsx5(
      "button",
      {
        ref,
        type: "button",
        className: cn(allClasses, className),
        disabled,
        "aria-pressed": active,
        "aria-label": ariaLabel,
        ...props,
        children: /* @__PURE__ */ jsx5("span", { className: "flex items-center justify-center", children: icon })
      }
    );
  }
);
IconButton.displayName = "IconButton";
var IconButton_default = IconButton;

// src/components/CheckBox/CheckBox.tsx
import {
  forwardRef as forwardRef2,
  useState,
  useId
} from "react";
import { Check, Minus } from "phosphor-react";
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
var SIZE_CLASSES3 = {
  small: {
    checkbox: "w-4 h-4",
    // 16px x 16px
    textSize: "sm",
    spacing: "gap-1.5",
    // 6px
    borderWidth: "border-2",
    iconSize: 14,
    // pixels for Phosphor icons
    labelHeight: "h-[21px]"
  },
  medium: {
    checkbox: "w-5 h-5",
    // 20px x 20px
    textSize: "md",
    spacing: "gap-2",
    // 8px
    borderWidth: "border-2",
    iconSize: 16,
    // pixels for Phosphor icons
    labelHeight: "h-6"
  },
  large: {
    checkbox: "w-6 h-6",
    // 24px x 24px
    textSize: "lg",
    spacing: "gap-2",
    // 8px
    borderWidth: "border-[3px]",
    // 3px border
    iconSize: 20,
    // pixels for Phosphor icons
    labelHeight: "h-[27px]"
  }
};
var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES = {
  default: {
    unchecked: "border-border-400 bg-background hover:border-border-500",
    checked: "border-primary-950 bg-primary-950 text-text hover:border-primary-800 hover:bg-primary-800"
  },
  hovered: {
    unchecked: "border-border-500 bg-background",
    checked: "border-primary-800 bg-primary-800 text-text"
  },
  focused: {
    unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
    checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
  },
  invalid: {
    unchecked: "border-error-700 bg-background hover:border-error-600",
    checked: "border-error-700 bg-primary-950 text-text"
  },
  disabled: {
    unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
    checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
  }
};
var CheckBox = forwardRef2(
  ({
    label,
    size = "medium",
    state = "default",
    indeterminate = false,
    errorMessage,
    helperText,
    className = "",
    labelClassName = "",
    checked: checkedProp,
    disabled,
    id,
    onChange,
    ...props
  }, ref) => {
    const generatedId = useId();
    const inputId = id ?? `checkbox-${generatedId}`;
    const [internalChecked, setInternalChecked] = useState(false);
    const isControlled = checkedProp !== void 0;
    const checked = isControlled ? checkedProp : internalChecked;
    const handleChange = (event) => {
      if (!isControlled) {
        setInternalChecked(event.target.checked);
      }
      onChange?.(event);
    };
    const currentState = disabled ? "disabled" : state;
    const sizeClasses = SIZE_CLASSES3[size];
    const checkVariant = checked || indeterminate ? "checked" : "unchecked";
    const stylingClasses = STATE_CLASSES[currentState][checkVariant];
    const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
    const checkboxClasses = cn(
      BASE_CHECKBOX_CLASSES,
      sizeClasses.checkbox,
      borderWidthClass,
      stylingClasses,
      className
    );
    const renderIcon = () => {
      if (indeterminate) {
        return /* @__PURE__ */ jsx6(
          Minus,
          {
            size: sizeClasses.iconSize,
            weight: "bold",
            color: "currentColor"
          }
        );
      }
      if (checked) {
        return /* @__PURE__ */ jsx6(
          Check,
          {
            size: sizeClasses.iconSize,
            weight: "bold",
            color: "currentColor"
          }
        );
      }
      return null;
    };
    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
      /* @__PURE__ */ jsxs4(
        "div",
        {
          className: cn(
            "flex flex-row items-center",
            sizeClasses.spacing,
            disabled ? "opacity-40" : ""
          ),
          children: [
            /* @__PURE__ */ jsx6(
              "input",
              {
                ref,
                type: "checkbox",
                id: inputId,
                checked,
                disabled,
                onChange: handleChange,
                className: "sr-only",
                ...props
              }
            ),
            /* @__PURE__ */ jsx6("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
            label && /* @__PURE__ */ jsx6(
              "div",
              {
                className: cn(
                  "flex flex-row items-center",
                  sizeClasses.labelHeight
                ),
                children: /* @__PURE__ */ jsx6(
                  Text_default,
                  {
                    as: "label",
                    htmlFor: inputId,
                    size: sizeClasses.textSize,
                    weight: "normal",
                    className: cn(
                      "cursor-pointer select-none leading-[150%] flex items-center font-roboto",
                      labelClassName
                    ),
                    children: label
                  }
                )
              }
            )
          ]
        }
      ),
      errorMessage && /* @__PURE__ */ jsx6(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5",
          color: "text-error-600",
          children: errorMessage
        }
      ),
      helperText && !errorMessage && /* @__PURE__ */ jsx6(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5",
          color: "text-text-500",
          children: helperText
        }
      )
    ] });
  }
);
CheckBox.displayName = "CheckBox";
var CheckBox_default = CheckBox;

// src/components/CheckBox/CheckboxList.tsx
import {
  forwardRef as forwardRef3,
  useId as useId2,
  useEffect,
  useRef,
  Children,
  cloneElement,
  isValidElement
} from "react";
import { create, useStore } from "zustand";
import { jsx as jsx7 } from "react/jsx-runtime";
var createCheckboxListStore = (name, defaultValues, disabled, onValuesChange) => create((set, get) => ({
  values: defaultValues,
  setValues: (values) => {
    if (!get().disabled) {
      set({ values });
      get().onValuesChange?.(values);
    }
  },
  toggleValue: (value) => {
    if (!get().disabled) {
      const currentValues = get().values;
      const newValues = currentValues.includes(value) ? currentValues.filter((v) => v !== value) : [...currentValues, value];
      set({ values: newValues });
      get().onValuesChange?.(newValues);
    }
  },
  onValuesChange,
  disabled,
  name
}));
var useCheckboxListStore = (externalStore) => {
  if (!externalStore) {
    throw new Error("CheckboxListItem must be used within a CheckboxList");
  }
  return externalStore;
};
var injectStore = (children, store) => Children.map(children, (child) => {
  if (!isValidElement(child)) return child;
  const typedChild = child;
  const shouldInject = typedChild.type === CheckboxListItem;
  return cloneElement(typedChild, {
    ...shouldInject ? { store } : {},
    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
  });
});
var CheckboxList = forwardRef3(
  ({
    values: propValues,
    defaultValues = [],
    onValuesChange,
    name: propName,
    disabled = false,
    className = "",
    children,
    ...props
  }, ref) => {
    const generatedId = useId2();
    const name = propName || `checkbox-list-${generatedId}`;
    const storeRef = useRef(null);
    storeRef.current ??= createCheckboxListStore(
      name,
      defaultValues,
      disabled,
      onValuesChange
    );
    const store = storeRef.current;
    const { setValues } = useStore(store, (s) => s);
    useEffect(() => {
      const currentValues = store.getState().values;
      if (currentValues.length > 0 && onValuesChange) {
        onValuesChange(currentValues);
      }
    }, []);
    useEffect(() => {
      if (propValues !== void 0) {
        setValues(propValues);
      }
    }, [propValues, setValues]);
    useEffect(() => {
      store.setState({ disabled });
    }, [disabled, store]);
    return /* @__PURE__ */ jsx7(
      "div",
      {
        ref,
        className: cn("flex flex-col gap-2 w-full", className),
        "aria-label": name,
        ...props,
        children: injectStore(children, store)
      }
    );
  }
);
CheckboxList.displayName = "CheckboxList";
var CheckboxListItem = forwardRef3(
  ({
    value,
    store: externalStore,
    disabled: itemDisabled,
    size = "medium",
    state = "default",
    className = "",
    id,
    ...props
  }, ref) => {
    const store = useCheckboxListStore(externalStore);
    const {
      values: groupValues,
      toggleValue,
      disabled: groupDisabled,
      name
    } = useStore(store);
    const generatedId = useId2();
    const inputId = id ?? `checkbox-item-${generatedId}`;
    const isChecked = groupValues.includes(value);
    const isDisabled = groupDisabled || itemDisabled;
    const currentState = isDisabled ? "disabled" : state;
    return /* @__PURE__ */ jsx7(
      CheckBox_default,
      {
        ref,
        id: inputId,
        name,
        value,
        checked: isChecked,
        disabled: isDisabled,
        size,
        state: currentState,
        className,
        onChange: () => {
          if (!isDisabled) {
            toggleValue(value);
          }
        },
        ...props
      }
    );
  }
);
CheckboxListItem.displayName = "CheckboxListItem";
var CheckboxList_default = CheckboxList;

// src/components/Radio/Radio.tsx
import {
  forwardRef as forwardRef4,
  useState as useState2,
  useId as useId3,
  useEffect as useEffect2,
  useRef as useRef2,
  Children as Children2,
  cloneElement as cloneElement2,
  isValidElement as isValidElement2
} from "react";
import { create as create2, useStore as useStore2 } from "zustand";
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
var SIZE_CLASSES4 = {
  small: {
    radio: "w-5 h-5",
    textSize: "sm",
    spacing: "gap-1.5",
    borderWidth: "border-2",
    dotSize: "w-2.5 h-2.5",
    labelHeight: "h-5"
  },
  medium: {
    radio: "w-6 h-6",
    textSize: "md",
    spacing: "gap-2",
    borderWidth: "border-2",
    dotSize: "w-3 h-3",
    labelHeight: "h-6"
  },
  large: {
    radio: "w-7 h-7",
    textSize: "lg",
    spacing: "gap-2",
    borderWidth: "border-2",
    dotSize: "w-3.5 h-3.5",
    labelHeight: "h-7"
  },
  extraLarge: {
    radio: "w-8 h-8",
    textSize: "xl",
    spacing: "gap-3",
    borderWidth: "border-2",
    dotSize: "w-4 h-4",
    labelHeight: "h-8"
  }
};
var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES2 = {
  default: {
    unchecked: "border-border-400 bg-background hover:border-border-500",
    checked: "border-primary-950 bg-background hover:border-primary-800"
  },
  hovered: {
    unchecked: "border-border-500 bg-background",
    checked: "border-info-700 bg-background"
  },
  focused: {
    unchecked: "border-border-400 bg-background",
    checked: "border-primary-950 bg-background"
  },
  invalid: {
    unchecked: "border-border-400 bg-background",
    checked: "border-primary-950 bg-background"
  },
  disabled: {
    unchecked: "border-border-400 bg-background cursor-not-allowed",
    checked: "border-primary-950 bg-background cursor-not-allowed"
  }
};
var DOT_CLASSES = {
  default: "bg-primary-950",
  hovered: "bg-info-700",
  focused: "bg-primary-950",
  invalid: "bg-primary-950",
  disabled: "bg-primary-950"
};
var Radio = forwardRef4(
  ({
    label,
    size = "medium",
    state = "default",
    errorMessage,
    helperText,
    className = "",
    labelClassName = "",
    checked: checkedProp,
    defaultChecked = false,
    disabled,
    id,
    name,
    value,
    onChange,
    ...props
  }, ref) => {
    const generatedId = useId3();
    const inputId = id ?? `radio-${generatedId}`;
    const inputRef = useRef2(null);
    const [internalChecked, setInternalChecked] = useState2(defaultChecked);
    const isControlled = checkedProp !== void 0;
    const checked = isControlled ? checkedProp : internalChecked;
    const handleChange = (event) => {
      const newChecked = event.target.checked;
      if (!isControlled) {
        setInternalChecked(newChecked);
      }
      if (event.target) {
        event.target.blur();
      }
      onChange?.(event);
    };
    const currentState = disabled ? "disabled" : state;
    const sizeClasses = SIZE_CLASSES4[size];
    const actualRadioSize = sizeClasses.radio;
    const actualDotSize = sizeClasses.dotSize;
    const radioVariant = checked ? "checked" : "unchecked";
    const stylingClasses = STATE_CLASSES2[currentState][radioVariant];
    const getBorderWidth = () => {
      if (currentState === "focused") {
        return "border-2";
      }
      return sizeClasses.borderWidth;
    };
    const borderWidthClass = getBorderWidth();
    const radioClasses = cn(
      BASE_RADIO_CLASSES,
      actualRadioSize,
      borderWidthClass,
      stylingClasses,
      className
    );
    const dotClasses = cn(
      actualDotSize,
      "rounded-full",
      DOT_CLASSES[currentState],
      "transition-all duration-200"
    );
    const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
    const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
    const getTextColor = () => {
      if (currentState === "disabled") {
        return checked ? "text-text-900" : "text-text-600";
      }
      if (currentState === "focused") {
        return "text-text-900";
      }
      return checked ? "text-text-900" : "text-text-600";
    };
    const getCursorClass = () => {
      return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
    };
    return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
      /* @__PURE__ */ jsxs5(
        "div",
        {
          className: cn(
            "flex flex-row items-center",
            isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
            disabled ? "opacity-40" : ""
          ),
          children: [
            /* @__PURE__ */ jsx8(
              "input",
              {
                ref: (node) => {
                  inputRef.current = node;
                  if (typeof ref === "function") ref(node);
                  else if (ref) ref.current = node;
                },
                type: "radio",
                id: inputId,
                checked,
                disabled,
                name,
                value,
                onChange: handleChange,
                className: "sr-only",
                style: {
                  position: "absolute",
                  left: "-9999px",
                  visibility: "hidden"
                },
                ...props
              }
            ),
            /* @__PURE__ */ jsx8(
              "button",
              {
                type: "button",
                className: radioClasses,
                disabled,
                "aria-pressed": checked,
                onClick: (e) => {
                  e.preventDefault();
                  if (!disabled) {
                    if (inputRef.current) {
                      inputRef.current.click();
                      inputRef.current.blur();
                    }
                  }
                },
                onKeyDown: (e) => {
                  if ((e.key === "Enter" || e.key === " ") && !disabled) {
                    e.preventDefault();
                    if (inputRef.current) {
                      inputRef.current.click();
                      inputRef.current.blur();
                    }
                  }
                },
                children: checked && /* @__PURE__ */ jsx8("div", { className: dotClasses })
              }
            ),
            label && /* @__PURE__ */ jsx8(
              "div",
              {
                className: cn(
                  "flex flex-row items-center",
                  sizeClasses.labelHeight,
                  "flex-1 min-w-0"
                ),
                children: /* @__PURE__ */ jsx8(
                  Text_default,
                  {
                    as: "label",
                    htmlFor: inputId,
                    size: sizeClasses.textSize,
                    weight: "normal",
                    className: cn(
                      getCursorClass(),
                      "select-none leading-normal flex items-center font-roboto truncate",
                      labelClassName
                    ),
                    color: getTextColor(),
                    children: label
                  }
                )
              }
            )
          ]
        }
      ),
      errorMessage && /* @__PURE__ */ jsx8(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5 truncate",
          color: "text-error-600",
          children: errorMessage
        }
      ),
      helperText && !errorMessage && /* @__PURE__ */ jsx8(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5 truncate",
          color: "text-text-500",
          children: helperText
        }
      )
    ] });
  }
);
Radio.displayName = "Radio";
var createRadioGroupStore = (name, defaultValue, disabled, onValueChange) => create2((set, get) => ({
  value: defaultValue,
  setValue: (value) => {
    if (!get().disabled) {
      set({ value });
      get().onValueChange?.(value);
    }
  },
  onValueChange,
  disabled,
  name
}));
var useRadioGroupStore = (externalStore) => {
  if (!externalStore) {
    throw new Error("RadioGroupItem must be used within a RadioGroup");
  }
  return externalStore;
};
var injectStore2 = (children, store) => Children2.map(children, (child) => {
  if (!isValidElement2(child)) return child;
  const typedChild = child;
  const shouldInject = typedChild.type === RadioGroupItem;
  return cloneElement2(typedChild, {
    ...shouldInject ? { store } : {},
    ...typedChild.props.children ? { children: injectStore2(typedChild.props.children, store) } : {}
  });
});
var RadioGroup = forwardRef4(
  ({
    value: propValue,
    defaultValue = "",
    onValueChange,
    name: propName,
    disabled = false,
    className = "",
    children,
    ...props
  }, ref) => {
    const generatedId = useId3();
    const name = propName || `radio-group-${generatedId}`;
    const storeRef = useRef2(null);
    storeRef.current ??= createRadioGroupStore(
      name,
      defaultValue,
      disabled,
      onValueChange
    );
    const store = storeRef.current;
    const { setValue } = useStore2(store, (s) => s);
    useEffect2(() => {
      const currentValue = store.getState().value;
      if (currentValue && onValueChange) {
        onValueChange(currentValue);
      }
    }, []);
    useEffect2(() => {
      if (propValue !== void 0) {
        setValue(propValue);
      }
    }, [propValue, setValue]);
    useEffect2(() => {
      store.setState({ disabled });
    }, [disabled, store]);
    return /* @__PURE__ */ jsx8(
      "div",
      {
        ref,
        className,
        role: "radiogroup",
        "aria-label": name,
        ...props,
        children: injectStore2(children, store)
      }
    );
  }
);
RadioGroup.displayName = "RadioGroup";
var RadioGroupItem = forwardRef4(
  ({
    value,
    store: externalStore,
    disabled: itemDisabled,
    size = "medium",
    state = "default",
    className = "",
    id,
    ...props
  }, ref) => {
    const store = useRadioGroupStore(externalStore);
    const {
      value: groupValue,
      setValue,
      disabled: groupDisabled,
      name
    } = useStore2(store);
    const generatedId = useId3();
    const inputId = id ?? `radio-item-${generatedId}`;
    const isChecked = groupValue === value;
    const isDisabled = groupDisabled || itemDisabled;
    const currentState = isDisabled ? "disabled" : state;
    return /* @__PURE__ */ jsx8(
      Radio,
      {
        ref,
        id: inputId,
        name,
        value,
        checked: isChecked,
        disabled: isDisabled,
        size,
        state: currentState,
        className,
        onChange: (e) => {
          if (e.target.checked && !isDisabled) {
            setValue(value);
          }
        },
        ...props
      }
    );
  }
);
RadioGroupItem.displayName = "RadioGroupItem";

// src/components/ProgressBar/ProgressBar.tsx
import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
var SIZE_CLASSES5 = {
  small: {
    container: "h-1",
    // 4px height (h-1 = 4px in Tailwind)
    bar: "h-1",
    // 4px height for the fill bar
    spacing: "gap-2",
    // 8px gap between label and progress bar
    layout: "flex-col",
    // vertical layout for small
    borderRadius: "rounded-full"
    // 9999px border radius
  },
  medium: {
    container: "h-2",
    // 8px height (h-2 = 8px in Tailwind)
    bar: "h-2",
    // 8px height for the fill bar
    spacing: "gap-2",
    // 8px gap between progress bar and label
    layout: "flex-row items-center",
    // horizontal layout for medium
    borderRadius: "rounded-lg"
    // 8px border radius
  }
};
var VARIANT_CLASSES = {
  blue: {
    background: "bg-background-300",
    // Background track color (#D5D4D4)
    fill: "bg-primary-700"
    // Blue for activity progress (#2271C4)
  },
  green: {
    background: "bg-background-300",
    // Background track color (#D5D4D4)
    fill: "bg-success-200"
    // Green for performance (#84D3A2)
  }
};
var calculateProgressValues = (value, max) => {
  const safeValue = isNaN(value) ? 0 : value;
  const clampedValue = Math.max(0, Math.min(safeValue, max));
  const percentage = max === 0 ? 0 : clampedValue / max * 100;
  return { clampedValue, percentage };
};
var shouldShowHeader = (label, showPercentage, showHitCount) => {
  return !!(label || showPercentage || showHitCount);
};
var getDisplayPriority = (showHitCount, showPercentage, label, clampedValue, max, percentage) => {
  if (showHitCount) {
    return {
      type: "hitCount",
      content: `${Math.round(clampedValue)} de ${max}`,
      hasMetrics: true
    };
  }
  if (showPercentage) {
    return {
      type: "percentage",
      content: `${Math.round(percentage)}%`,
      hasMetrics: true
    };
  }
  return {
    type: "label",
    content: label,
    hasMetrics: false
  };
};
var getCompactLayoutConfig = ({
  showPercentage,
  showHitCount,
  percentage,
  clampedValue,
  max,
  label,
  percentageClassName,
  labelClassName
}) => {
  const displayPriority = getDisplayPriority(
    showHitCount,
    showPercentage,
    label,
    clampedValue,
    max,
    percentage
  );
  return {
    color: displayPriority.hasMetrics ? "text-primary-600" : "text-primary-700",
    className: displayPriority.hasMetrics ? percentageClassName : labelClassName,
    content: displayPriority.content
  };
};
var getDefaultLayoutDisplayConfig = (size, label, showPercentage) => ({
  showHeader: size === "small" && !!(label || showPercentage),
  showPercentage: size === "medium" && showPercentage,
  showLabel: size === "medium" && !!label && !showPercentage
  // Only show label when percentage is not shown
});
var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue, max, percentage, percentageClassName) => {
  if (!showHitCount && !showPercentage) return null;
  const displayPriority = getDisplayPriority(
    showHitCount,
    showPercentage,
    null,
    // label is not relevant for stacked layout metrics display
    clampedValue,
    max,
    percentage
  );
  return /* @__PURE__ */ jsx9(
    "div",
    {
      className: cn(
        "text-xs font-medium leading-[14px] text-right",
        percentageClassName
      ),
      children: displayPriority.type === "hitCount" ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
        /* @__PURE__ */ jsx9("span", { className: "text-success-200", children: Math.round(clampedValue) }),
        /* @__PURE__ */ jsxs6("span", { className: "text-text-600", children: [
          " de ",
          max
        ] })
      ] }) : /* @__PURE__ */ jsxs6(Text_default, { size: "xs", weight: "medium", className: "text-success-200", children: [
        Math.round(percentage),
        "%"
      ] })
    }
  );
};
var ProgressBarBase = ({
  clampedValue,
  max,
  percentage,
  label,
  variantClasses,
  containerClassName,
  fillClassName
}) => /* @__PURE__ */ jsxs6(
  "div",
  {
    className: cn(
      containerClassName,
      variantClasses.background,
      "overflow-hidden relative"
    ),
    children: [
      /* @__PURE__ */ jsx9(
        "progress",
        {
          value: clampedValue,
          max,
          "aria-label": typeof label === "string" ? `${label}: ${Math.round(percentage)}% complete` : `Progress: ${Math.round(percentage)}% of ${max}`,
          className: "absolute inset-0 w-full h-full opacity-0"
        }
      ),
      /* @__PURE__ */ jsx9(
        "div",
        {
          className: cn(
            fillClassName,
            variantClasses.fill,
            "transition-all duration-300 ease-out"
          ),
          style: { width: `${percentage}%` }
        }
      )
    ]
  }
);
var StackedLayout = ({
  className,
  label,
  showPercentage,
  showHitCount,
  labelClassName,
  percentageClassName,
  clampedValue,
  max,
  percentage,
  variantClasses,
  dimensions
}) => /* @__PURE__ */ jsxs6(
  "div",
  {
    className: cn(
      "flex flex-col items-start gap-2",
      dimensions.width,
      dimensions.height,
      className
    ),
    children: [
      shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsxs6("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
        label && /* @__PURE__ */ jsx9(
          Text_default,
          {
            as: "div",
            size: "md",
            weight: "medium",
            className: cn("text-text-600 leading-[19px]", labelClassName),
            children: label
          }
        ),
        renderStackedHitCountDisplay(
          showHitCount,
          showPercentage,
          clampedValue,
          max,
          percentage,
          percentageClassName
        )
      ] }),
      /* @__PURE__ */ jsx9(
        ProgressBarBase,
        {
          clampedValue,
          max,
          percentage,
          label,
          variantClasses,
          containerClassName: "w-full h-2 rounded-lg",
          fillClassName: "h-2 rounded-lg shadow-hard-shadow-3"
        }
      )
    ]
  }
);
var CompactLayout = ({
  className,
  label,
  showPercentage,
  showHitCount,
  labelClassName,
  percentageClassName,
  clampedValue,
  max,
  percentage,
  variantClasses,
  dimensions
}) => {
  const {
    color,
    className: compactClassName,
    content
  } = getCompactLayoutConfig({
    showPercentage,
    showHitCount,
    percentage,
    clampedValue,
    max,
    label,
    percentageClassName,
    labelClassName
  });
  return /* @__PURE__ */ jsxs6(
    "div",
    {
      className: cn(
        "flex flex-col items-start gap-1",
        dimensions.width,
        dimensions.height,
        className
      ),
      children: [
        shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ jsx9(
          Text_default,
          {
            as: "div",
            size: "sm",
            weight: "medium",
            color,
            className: cn("leading-4 w-full", compactClassName),
            children: content
          }
        ),
        /* @__PURE__ */ jsx9(
          ProgressBarBase,
          {
            clampedValue,
            max,
            percentage,
            label,
            variantClasses,
            containerClassName: "w-full h-1 rounded-full",
            fillClassName: "h-1 rounded-full"
          }
        )
      ]
    }
  );
};
var DefaultLayout = ({
  className,
  size,
  sizeClasses,
  variantClasses,
  label,
  showPercentage,
  labelClassName,
  percentageClassName,
  clampedValue,
  max,
  percentage
}) => {
  const gapClass = size === "medium" ? "gap-2" : sizeClasses.spacing;
  const progressBarClass = size === "medium" ? "flex-grow" : "w-full";
  const displayConfig = getDefaultLayoutDisplayConfig(
    size,
    label,
    showPercentage
  );
  return /* @__PURE__ */ jsxs6("div", { className: cn("flex", sizeClasses.layout, gapClass, className), children: [
    displayConfig.showHeader && /* @__PURE__ */ jsxs6("div", { className: "flex flex-row items-center justify-between w-full", children: [
      label && /* @__PURE__ */ jsx9(
        Text_default,
        {
          as: "div",
          size: "xs",
          weight: "medium",
          className: cn(
            "text-text-950 leading-none tracking-normal text-center",
            labelClassName
          ),
          children: label
        }
      ),
      showPercentage && /* @__PURE__ */ jsxs6(
        Text_default,
        {
          size: "xs",
          weight: "medium",
          className: cn(
            "text-text-950 leading-none tracking-normal text-center",
            percentageClassName
          ),
          children: [
            Math.round(percentage),
            "%"
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsx9(
      ProgressBarBase,
      {
        clampedValue,
        max,
        percentage,
        label,
        variantClasses,
        containerClassName: cn(
          progressBarClass,
          sizeClasses.container,
          sizeClasses.borderRadius
        ),
        fillClassName: cn(
          sizeClasses.bar,
          sizeClasses.borderRadius,
          "shadow-hard-shadow-3"
        )
      }
    ),
    displayConfig.showPercentage && /* @__PURE__ */ jsxs6(
      Text_default,
      {
        size: "xs",
        weight: "medium",
        className: cn(
          "text-text-950 leading-none tracking-normal text-center flex-none",
          percentageClassName
        ),
        children: [
          Math.round(percentage),
          "%"
        ]
      }
    ),
    displayConfig.showLabel && /* @__PURE__ */ jsx9(
      Text_default,
      {
        as: "div",
        size: "xs",
        weight: "medium",
        className: cn(
          "text-text-950 leading-none tracking-normal text-center flex-none",
          labelClassName
        ),
        children: label
      }
    )
  ] });
};
var ProgressBar = ({
  value,
  max = 100,
  size = "medium",
  variant = "blue",
  layout = "default",
  label,
  showPercentage = false,
  showHitCount = false,
  className = "",
  labelClassName = "",
  percentageClassName = "",
  stackedWidth,
  stackedHeight,
  compactWidth,
  compactHeight
}) => {
  const { clampedValue, percentage } = calculateProgressValues(value, max);
  const sizeClasses = SIZE_CLASSES5[size];
  const variantClasses = VARIANT_CLASSES[variant];
  if (layout === "stacked") {
    return /* @__PURE__ */ jsx9(
      StackedLayout,
      {
        className,
        label,
        showPercentage,
        showHitCount,
        labelClassName,
        percentageClassName,
        clampedValue,
        max,
        percentage,
        variantClasses,
        dimensions: {
          width: stackedWidth ?? "w-[380px]",
          height: stackedHeight ?? "h-[35px]"
        }
      }
    );
  }
  if (layout === "compact") {
    return /* @__PURE__ */ jsx9(
      CompactLayout,
      {
        className,
        label,
        showPercentage,
        showHitCount,
        labelClassName,
        percentageClassName,
        clampedValue,
        max,
        percentage,
        variantClasses,
        dimensions: {
          width: compactWidth ?? "w-[131px]",
          height: compactHeight ?? "h-[24px]"
        }
      }
    );
  }
  return /* @__PURE__ */ jsx9(
    DefaultLayout,
    {
      className,
      size,
      sizeClasses,
      variantClasses,
      label,
      showPercentage,
      labelClassName,
      percentageClassName,
      clampedValue,
      max,
      percentage
    }
  );
};
var ProgressBar_default = ProgressBar;

// src/components/Alternative/Alternative.tsx
import { CheckCircle, XCircle } from "phosphor-react";
import { forwardRef as forwardRef5, useId as useId4, useState as useState3 } from "react";
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
var AlternativesList = ({
  alternatives,
  name,
  defaultValue,
  value,
  onValueChange,
  disabled = false,
  layout = "default",
  className = "",
  mode = "interactive",