analytica-frontend-lib 1.0.87 → 1.0.89

package/dist/CheckBox/CheckboxList/index.mjs

@@ -0,0 +1,415 @@
+// src/components/CheckBox/CheckboxList.tsx
+import {
+  forwardRef as forwardRef2,
+  useId as useId2,
+  useEffect,
+  useRef,
+  Children,
+  cloneElement,
+  isValidElement
+} from "react";
+import { create, useStore } from "zustand";
+
+// src/components/CheckBox/CheckBox.tsx
+import {
+  forwardRef,
+  useState,
+  useId
+} from "react";
+
+// src/utils/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// 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/CheckBox/CheckBox.tsx
+import { Check, Minus } from "phosphor-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  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 = forwardRef(
+  ({
+    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_CLASSES[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__ */ jsx2(
+          Minus,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      if (checked) {
+        return /* @__PURE__ */ jsx2(
+          Check,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-row items-center",
+            sizeClasses.spacing,
+            disabled ? "opacity-40" : ""
+          ),
+          children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                id: inputId,
+                checked,
+                disabled,
+                onChange: handleChange,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx2("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: cn(
+                  "flex flex-row items-center",
+                  sizeClasses.labelHeight
+                ),
+                children: /* @__PURE__ */ jsx2(
+                  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__ */ jsx2(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ jsx2(
+        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 { jsx as jsx3 } 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 = forwardRef2(
+  ({
+    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__ */ jsx3(
+      "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 = forwardRef2(
+  ({
+    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__ */ jsx3(
+      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;
+export {
+  CheckboxListItem,
+  CheckboxList_default as default,
+  useCheckboxListStore
+};

package/dist/Quiz/index.js

@@ -4757,7 +4757,7 @@ var QuizFooter = (0, import_react11.forwardRef)(
           onClose: () => setModalNavigateOpen(false),
           title: "Quest\xF5es",
           size: "lg",
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col w-full h-full", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col w-full h-full not-lg:max-h-[calc(100vh-200px)] lg:max-h-[calc(687px-76px)]", children: [
             /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-row justify-between items-center py-6 pt-6 pb-4 border-b border-border-200", children: [
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-text-950 font-bold text-lg", children: "Filtrar por" }),
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "max-w-[266px]", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Select_default, { value: filterType, onValueChange: setFilterType, children: [
@@ -4769,7 +4769,7 @@ var QuizFooter = (0, import_react11.forwardRef)(
                 ] })
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col gap-2 not-lg:h-[calc(100vh-200px)] lg:max-h-[687px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col gap-2 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               QuizQuestionList,
               {
                 filterType,

package/dist/Quiz/index.mjs

@@ -4782,7 +4782,7 @@ var QuizFooter = forwardRef9(
           onClose: () => setModalNavigateOpen(false),
           title: "Quest\xF5es",
           size: "lg",
-          children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col w-full h-full", children: [
+          children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col w-full h-full not-lg:max-h-[calc(100vh-200px)] lg:max-h-[calc(687px-76px)]", children: [
             /* @__PURE__ */ jsxs13("div", { className: "flex flex-row justify-between items-center py-6 pt-6 pb-4 border-b border-border-200", children: [
               /* @__PURE__ */ jsx16("p", { className: "text-text-950 font-bold text-lg", children: "Filtrar por" }),
               /* @__PURE__ */ jsx16("span", { className: "max-w-[266px]", children: /* @__PURE__ */ jsxs13(Select_default, { value: filterType, onValueChange: setFilterType, children: [
@@ -4794,7 +4794,7 @@ var QuizFooter = forwardRef9(
                 ] })
               ] }) })
             ] }),
-            /* @__PURE__ */ jsx16("div", { className: "flex flex-col gap-2 not-lg:h-[calc(100vh-200px)] lg:max-h-[687px] overflow-y-auto", children: /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx16("div", { className: "flex flex-col gap-2 overflow-y-auto", children: /* @__PURE__ */ jsx16(
               QuizQuestionList,
               {
                 filterType,

package/dist/index.css

@@ -3460,9 +3460,9 @@
       border-radius: var(--radius-xl);
     }
   }
-  .not-lg\:h-\[calc\(100vh-200px\)\] {
+  .not-lg\:max-h-\[calc\(100vh-200px\)\] {
     @media not (width >= 64rem) {
-      height: calc(100vh - 200px);
+      max-height: calc(100vh - 200px);
     }
   }
   .not-lg\:max-w-\[calc\(100vw-32px\)\] {
@@ -8039,9 +8039,9 @@
       height: calc(var(--spacing) * 6);
     }
   }
-  .lg\:max-h-\[687px\] {
+  .lg\:max-h-\[calc\(687px-76px\)\] {
     @media (width >= 64rem) {
-      max-height: 687px;
+      max-height: calc(687px - 76px);
     }
   }
   .lg\:w-3\.5 {