analytica-frontend-lib 1.0.22 → 1.0.24

package/dist/chunk-LYOJCBOM.mjs

@@ -0,0 +1,195 @@
+import {
+  Text
+} from "./chunk-TT3VCQGR.mjs";
+
+// src/components/CheckBox/CheckBox.tsx
+import {
+  forwardRef,
+  useState,
+  useId
+} from "react";
+import { Check, Minus } from "phosphor-react";
+import { jsx, 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 = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
+    const renderIcon = () => {
+      if (indeterminate) {
+        return /* @__PURE__ */ jsx(
+          Minus,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      if (checked) {
+        return /* @__PURE__ */ jsx(
+          Check,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                id: inputId,
+                checked,
+                disabled,
+                onChange: handleChange,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "label",
+                    htmlFor: inputId,
+                    size: sizeClasses.textSize,
+                    weight: "normal",
+                    className: `cursor-pointer select-none leading-[150%] flex items-center font-roboto ${labelClassName}`,
+                    children: label
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+CheckBox.displayName = "CheckBox";
+
+export {
+  CheckBox
+};

package/dist/chunk-MI5FIRHM.mjs

@@ -0,0 +1,75 @@
+// src/components/Toast/Toast.tsx
+import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VARIANT_ACTION_CLASSES = {
+  solid: {
+    warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
+    success: "bg-success text-success-800 border-none focus-visible:outline-none",
+    info: "bg-info text-info-800 border-none focus-visible:outline-none"
+  },
+  outlined: {
+    warning: "bg-warning text-warning-800 border border-warning-200 focus-visible:outline-none",
+    success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
+    info: "bg-info text-info-800 border border-info-200 focus-visible:outline-none"
+  }
+};
+var iconMap = {
+  success: CheckCircle,
+  info: Info,
+  warning: WarningCircle
+};
+var Toast = ({
+  variant = "outlined",
+  action = "success",
+  className = "",
+  onClose,
+  title,
+  description,
+  position = "default",
+  ...props
+}) => {
+  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
+  const positionClasses = {
+    "top-left": "fixed top-4 left-4",
+    "top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
+    "top-right": "fixed top-4 right-4",
+    "bottom-left": "fixed bottom-4 left-4",
+    "bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
+    "bottom-right": "fixed bottom-4 right-4",
+    default: ""
+  };
+  const IconAction = iconMap[action] || iconMap["success"];
+  const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx(IconAction, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-md text-text-900", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            "aria-label": "Dismiss notification",
+            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Toast
+};

package/dist/chunk-NWGRQN6R.mjs

@@ -0,0 +1,108 @@
+// src/components/Table/Table.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Table = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      ref,
+      className: `w-full caption-bottom text-sm ${className ?? ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("caption", { className: "sr-only", children: "My Table" }),
+        children
+      ]
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: `[&_tr:first-child]:border-0 ${className}`,
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var VARIANT_STATES_ROW = {
+  default: "border-b border-border-200",
+  selected: "border-b-2 border-indicator-primary",
+  invalid: "border-b-2 border-indicator-error",
+  disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
+};
+var TableRow = forwardRef(
+  ({ state = "default", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ref,
+        className: `
+        transition-colors
+        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
+        ${VARIANT_STATES_ROW[state]}
+        ${className}
+      `,
+        "aria-disabled": state === "disabled",
+        ...props
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption
+};

package/dist/chunk-QODEDLAX.mjs

@@ -0,0 +1,142 @@
+import {
+  Text
+} from "./chunk-TT3VCQGR.mjs";
+
+// src/components/TextArea/TextArea.tsx
+import {
+  forwardRef,
+  useState,
+  useId
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  small: {
+    container: "w-72",
+    // 288px width
+    textarea: "h-24 text-sm",
+    // 96px height, 14px font
+    textSize: "sm"
+  },
+  medium: {
+    container: "w-72",
+    // 288px width
+    textarea: "h-24 text-base",
+    // 96px height, 16px font
+    textSize: "md"
+  },
+  large: {
+    container: "w-72",
+    // 288px width
+    textarea: "h-24 text-lg",
+    // 96px height, 18px font
+    textSize: "lg"
+  },
+  extraLarge: {
+    container: "w-72",
+    // 288px width
+    textarea: "h-24 text-xl",
+    // 96px height, 20px font
+    textSize: "xl"
+  }
+};
+var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
+var STATE_CLASSES = {
+  default: {
+    base: "border-border-300 bg-background text-text-600",
+    hover: "hover:border-border-400",
+    focus: "focus:border-border-500"
+  },
+  hovered: {
+    base: "border-border-400 bg-background text-text-600",
+    hover: "",
+    focus: "focus:border-border-500"
+  },
+  focused: {
+    base: "border-2 border-primary-950 bg-background text-text-900",
+    hover: "",
+    focus: ""
+  },
+  invalid: {
+    base: "border-2 border-red-700 bg-white text-gray-800",
+    hover: "hover:border-red-700",
+    focus: "focus:border-red-700"
+  },
+  disabled: {
+    base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
+    hover: "",
+    focus: ""
+  }
+};
+var TextArea = forwardRef(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    errorMessage,
+    helperMessage,
+    className = "",
+    labelClassName = "",
+    disabled,
+    id,
+    onChange,
+    placeholder,
+    ...props
+  }, ref) => {
+    const generatedId = useId();
+    const inputId = id ?? `textarea-${generatedId}`;
+    const [isFocused, setIsFocused] = useState(false);
+    const handleChange = (event) => {
+      onChange?.(event);
+    };
+    const handleFocus = (event) => {
+      setIsFocused(true);
+      props.onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+      setIsFocused(false);
+      props.onBlur?.(event);
+    };
+    let currentState = disabled ? "disabled" : state;
+    if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
+      currentState = "focused";
+    }
+    const sizeClasses = SIZE_CLASSES[size];
+    const stateClasses = STATE_CLASSES[currentState];
+    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
+    return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
+      label && /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "label",
+          htmlFor: inputId,
+          size: sizeClasses.textSize,
+          weight: "medium",
+          color: "text-text-950",
+          className: `mb-1.5 ${labelClassName}`,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          id: inputId,
+          disabled,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className: textareaClasses,
+          placeholder,
+          ...props
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperMessage && !errorMessage && /* @__PURE__ */ jsx(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+
+export {
+  TextArea
+};

package/dist/chunk-QOFMTSHE.mjs

@@ -0,0 +1,44 @@
+// src/components/IconRoundedButton/IconRoundedButton.tsx
+import { jsx } from "react/jsx-runtime";
+var IconRoundedButton = ({
+  icon,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "w-8",
+    "h-8",
+    "rounded-full",
+    "cursor-pointer",
+    "border",
+    "border-background-200",
+    "bg-background",
+    "text-text-950",
+    "hover:shadow-hard-shadow-1",
+    "focus-visible:outline-none",
+    "focus-visible:shadow-hard-shadow-1",
+    "focus-visible:ring-2",
+    "focus-visible:ring-indicator-info",
+    "focus-visible:ring-offset-0",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ].join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `${baseClasses} ${className}`,
+      disabled,
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
+    }
+  );
+};
+
+export {
+  IconRoundedButton
+};

package/dist/chunk-RPYPJ5O5.mjs

@@ -0,0 +1,55 @@
+// src/components/IconButton/IconButton.tsx
+import { forwardRef } from "react";
+import { jsx } 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__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+export {
+  IconButton
+};

package/dist/chunk-SESX5OEP.mjs

@@ -0,0 +1,57 @@
+// src/components/SelectionButton/SelectionButton.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SelectionButton = forwardRef(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "gap-2",
+      "p-4",
+      "rounded-xl",
+      "cursor-pointer",
+      "border",
+      "border-border-50",
+      "bg-background",
+      "text-sm",
+      "text-text-700",
+      "font-bold",
+      "shadow-soft-shadow-1",
+      "hover:bg-background-100",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-indicator-info",
+      "focus-visible:ring-offset-0",
+      "focus-visible:shadow-none",
+      "active:ring-2",
+      "active:ring-primary-950",
+      "active:ring-offset-0",
+      "active:shadow-none",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed"
+    ];
+    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": selected,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+SelectionButton.displayName = "SelectionButton";
+
+export {
+  SelectionButton
+};