analytica-frontend-lib 1.1.94 → 1.1.95

package/dist/StatisticsCard/index.mjs

@@ -0,0 +1,589 @@
+// 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/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/Select/Select.tsx
+import { create, useStore } from "zustand";
+import {
+  useEffect,
+  useRef,
+  forwardRef,
+  isValidElement,
+  Children,
+  cloneElement,
+  useId
+} from "react";
+import { CaretDown, Check, WarningCircle } from "phosphor-react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var VARIANT_CLASSES = {
+  outlined: "border-2 rounded-lg focus:border-primary-950",
+  underlined: "border-b-2 focus:border-primary-950",
+  rounded: "border-2 rounded-full focus:border-primary-950"
+};
+var SIZE_CLASSES2 = {
+  small: "text-sm",
+  medium: "text-md",
+  large: "text-lg",
+  "extra-large": "text-lg"
+};
+var HEIGHT_CLASSES = {
+  small: "h-8",
+  medium: "h-9",
+  large: "h-10",
+  "extra-large": "h-12"
+};
+var PADDING_CLASSES = {
+  small: "px-2 py-1",
+  medium: "px-3 py-2",
+  large: "px-4 py-3",
+  "extra-large": "px-5 py-4"
+};
+var SIDE_CLASSES = {
+  top: "bottom-full -translate-y-1",
+  right: "top-full translate-y-1",
+  bottom: "top-full translate-y-1",
+  left: "top-full translate-y-1"
+};
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+function createSelectStore(onValueChange) {
+  return create((set) => ({
+    open: false,
+    setOpen: (open) => set({ open }),
+    value: "",
+    setValue: (value) => set({ value }),
+    selectedLabel: "",
+    setSelectedLabel: (label) => set({ selectedLabel: label }),
+    onValueChange
+  }));
+}
+var useSelectStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error(
+      "Component must be used within a Select (store is missing)"
+    );
+  }
+  return externalStore;
+};
+function getLabelAsNode(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return children;
+  }
+  const flattened = Children.toArray(children);
+  if (flattened.length === 1) return flattened[0];
+  return /* @__PURE__ */ jsx3(Fragment, { children: flattened });
+}
+var injectStore = (children, store, size, selectId) => {
+  return Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.type === SelectTrigger) {
+        newProps.size = size;
+        newProps.selectId = selectId;
+      }
+      if (typedChild.props.children) {
+        newProps.children = injectStore(
+          typedChild.props.children,
+          store,
+          size,
+          selectId
+        );
+      }
+      return cloneElement(typedChild, newProps);
+    }
+    return child;
+  });
+};
+var Select = ({
+  children,
+  defaultValue = "",
+  className,
+  value: propValue,
+  onValueChange,
+  size = "small",
+  label,
+  helperText,
+  errorMessage,
+  id
+}) => {
+  const storeRef = useRef(null);
+  storeRef.current ??= createSelectStore(onValueChange);
+  const store = storeRef.current;
+  const selectRef = useRef(null);
+  const { open, setOpen, setValue, selectedLabel } = useStore(store, (s) => s);
+  const generatedId = useId();
+  const selectId = id ?? `select-${generatedId}`;
+  const findLabelForValue = (children2, targetValue) => {
+    let found = null;
+    const search = (nodes) => {
+      Children.forEach(nodes, (child) => {
+        if (!isValidElement(child)) return;
+        const typedChild = child;
+        if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
+          if (typeof typedChild.props.children === "string")
+            found = typedChild.props.children;
+        }
+        if (typedChild.props.children && !found)
+          search(typedChild.props.children);
+      });
+    };
+    search(children2);
+    return found;
+  };
+  useEffect(() => {
+    if (!selectedLabel && defaultValue) {
+      const label2 = findLabelForValue(children, defaultValue);
+      if (label2) store.setState({ selectedLabel: label2 });
+    }
+  }, [children, defaultValue, selectedLabel]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (selectRef.current && !selectRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleArrowKeys = (event) => {
+      const selectContent = selectRef.current?.querySelector('[role="menu"]');
+      if (selectContent) {
+        event.preventDefault();
+        const items = Array.from(
+          selectContent.querySelectorAll(
+            '[role="menuitem"]:not([aria-disabled="true"])'
+          )
+        ).filter((el) => el instanceof HTMLElement);
+        const focused = document.activeElement;
+        const currentIndex = items.findIndex((item) => item === focused);
+        let nextIndex = 0;
+        if (event.key === "ArrowDown") {
+          nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+        } else {
+          nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+        }
+        items[nextIndex]?.focus();
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleArrowKeys);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleArrowKeys);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (propValue) {
+      setValue(propValue);
+      const label2 = findLabelForValue(children, propValue);
+      if (label2) store.setState({ selectedLabel: label2 });
+    }
+  }, [propValue]);
+  const sizeClasses = SIZE_CLASSES2[size];
+  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full", className), children: [
+    label && /* @__PURE__ */ jsx3(
+      "label",
+      {
+        htmlFor: selectId,
+        className: cn("block font-bold text-text-900 mb-1.5", sizeClasses),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx3("div", { className: cn("relative w-full"), ref: selectRef, children: injectStore(children, store, size, selectId) }),
+    (helperText || errorMessage) && /* @__PURE__ */ jsxs2("div", { className: "mt-1.5 gap-1.5", children: [
+      helperText && /* @__PURE__ */ jsx3("p", { className: "text-sm text-text-500", children: helperText }),
+      errorMessage && /* @__PURE__ */ jsxs2("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
+        /* @__PURE__ */ jsx3(WarningCircle, { size: 16 }),
+        " ",
+        errorMessage
+      ] })
+    ] })
+  ] });
+};
+var SelectValue = ({
+  placeholder,
+  store: externalStore
+}) => {
+  const store = useSelectStore(externalStore);
+  const selectedLabel = useStore(store, (s) => s.selectedLabel);
+  const value = useStore(store, (s) => s.value);
+  return /* @__PURE__ */ jsx3("span", { className: "text-inherit flex gap-2 items-center", children: selectedLabel || placeholder || value });
+};
+var SelectTrigger = forwardRef(
+  ({
+    className,
+    invalid = false,
+    variant = "outlined",
+    store: externalStore,
+    disabled,
+    size = "medium",
+    selectId,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const open = useStore(store, (s) => s.open);
+    const toggleOpen = () => store.setState({ open: !open });
+    const variantClasses = VARIANT_CLASSES[variant];
+    const heightClasses = HEIGHT_CLASSES[size];
+    const paddingClasses = PADDING_CLASSES[size];
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref,
+        id: selectId,
+        className: cn(
+          "flex w-full items-center justify-between border-border-300",
+          heightClasses,
+          paddingClasses,
+          invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`,
+          disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+          !invalid && !disabled ? "text-text-700" : "",
+          variantClasses,
+          className
+        ),
+        onClick: toggleOpen,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": open ? "select-content" : void 0,
+        ...props,
+        children: [
+          props.children,
+          /* @__PURE__ */ jsx3(
+            CaretDown,
+            {
+              className: cn(
+                "h-[1em] w-[1em] opacity-50 transition-transform",
+                open ? "rotate-180" : ""
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = forwardRef(
+  ({
+    children,
+    className,
+    align = "start",
+    side = "bottom",
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const open = useStore(store, (s) => s.open);
+    if (!open) return null;
+    const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "menu",
+        ref,
+        className: cn(
+          "bg-secondary z-50 min-w-[210px] max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md border-border-100",
+          getPositionClasses(),
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = forwardRef(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const {
+      value: selectedValue,
+      setValue,
+      setOpen,
+      setSelectedLabel,
+      onValueChange
+    } = useStore(store, (s) => s);
+    const handleClick = (e) => {
+      const labelNode = getLabelAsNode(children);
+      if (!disabled) {
+        setValue(value);
+        setSelectedLabel(labelNode);
+        setOpen(false);
+        onValueChange?.(value);
+      }
+      props.onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "menuitem",
+        "aria-disabled": disabled,
+        ref,
+        className: `
+          bg-secondary focus-visible:bg-background-50
+          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+          ${selectedValue === value && "bg-background-50"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx3(Check, { className: "" }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var Select_default = Select;
+
+// src/components/StatisticsCard/StatisticsCard.tsx
+import { Plus } from "phosphor-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var VARIANT_STYLES = {
+  high: "bg-success-background",
+  medium: "bg-warning-background",
+  low: "bg-error-background",
+  total: "bg-info-background"
+};
+var VALUE_TEXT_COLORS = {
+  high: "text-success-700",
+  medium: "text-warning-600",
+  low: "text-error-700",
+  total: "text-info-700"
+};
+var StatCard = ({ item }) => {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `rounded-xl py-[17px] px-6 min-h-[105px] flex flex-col justify-center items-start gap-1 ${VARIANT_STYLES[item.variant]}`,
+      children: [
+        /* @__PURE__ */ jsx4(
+          Text_default,
+          {
+            size: "4xl",
+            weight: "bold",
+            className: `${VALUE_TEXT_COLORS[item.variant]} leading-[42px] tracking-[0.2px] self-stretch`,
+            children: item.value
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Text_default,
+          {
+            size: "xs",
+            weight: "bold",
+            className: "uppercase text-[8px] leading-[9px] text-text-800 self-stretch",
+            children: item.label
+          }
+        )
+      ]
+    }
+  );
+};
+var StatisticsCard = ({
+  title,
+  data,
+  emptyStateMessage,
+  emptyStateButtonText,
+  onEmptyStateButtonClick,
+  dropdownOptions,
+  selectedDropdownValue,
+  onDropdownChange,
+  selectPlaceholder = "Selecione um per\xEDodo",
+  dropdownAriaLabel = "Filtro de per\xEDodo",
+  className = ""
+}) => {
+  const hasData = data && data.length > 0;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `bg-background rounded-xl p-4 h-auto lg:h-[185px] flex flex-col gap-2 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-row justify-between items-center gap-4", children: [
+          /* @__PURE__ */ jsx4(Text_default, { as: "h3", size: "sm", weight: "medium", color: "text-text-600", children: title }),
+          dropdownOptions && dropdownOptions.length > 0 && /* @__PURE__ */ jsx4("div", { className: "w-[99px]", children: /* @__PURE__ */ jsxs3(
+            Select_default,
+            {
+              value: selectedDropdownValue,
+              onValueChange: onDropdownChange,
+              size: "medium",
+              children: [
+                /* @__PURE__ */ jsx4(
+                  SelectTrigger,
+                  {
+                    className: "border border-border-300 rounded whitespace-nowrap",
+                    "aria-label": dropdownAriaLabel,
+                    children: /* @__PURE__ */ jsx4(SelectValue, { placeholder: selectPlaceholder })
+                  }
+                ),
+                /* @__PURE__ */ jsx4(SelectContent, { children: dropdownOptions.map((option) => /* @__PURE__ */ jsx4(SelectItem, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          ) })
+        ] }),
+        hasData ? /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[13px]", children: data.map((item, index) => /* @__PURE__ */ jsx4(
+          StatCard,
+          {
+            item
+          },
+          `${item.variant}-${item.label}-${index}`
+        )) }) : /* @__PURE__ */ jsxs3("div", { className: "border border-dashed border-border-300 rounded-lg p-6 min-h-[105px] flex flex-col items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx4(
+            Text_default,
+            {
+              size: "sm",
+              color: "text-text-600",
+              className: "text-center max-w-md",
+              children: emptyStateMessage
+            }
+          ),
+          onEmptyStateButtonClick && /* @__PURE__ */ jsx4(
+            Button_default,
+            {
+              variant: "outline",
+              action: "primary",
+              size: "small",
+              onClick: onEmptyStateButtonClick,
+              iconLeft: /* @__PURE__ */ jsx4(Plus, { size: 16, weight: "bold" }),
+              children: emptyStateButtonText
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  StatisticsCard
+};
+//# sourceMappingURL=index.mjs.map