analytica-frontend-lib 1.1.21 → 1.1.23

package/dist/NotificationCard/index.js

@@ -0,0 +1,799 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/NotificationCard/NotificationCard.tsx
+var NotificationCard_exports = {};
+__export(NotificationCard_exports, {
+  default: () => NotificationCard_default
+});
+module.exports = __toCommonJS(NotificationCard_exports);
+var import_phosphor_react2 = require("phosphor-react");
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/assets/img/no-notification-result.png
+var no_notification_result_default = "../no-notification-result-7Y3ACV6V.png";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_phosphor_react = require("phosphor-react");
+var import_react = require("react");
+var import_zustand = require("zustand");
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      className: cn(baseClasses, variantClasses, sizeClasses, className),
+      disabled,
+      type,
+      ...props,
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function createDropdownStore() {
+  return (0, import_zustand.create)((set) => ({
+    open: false,
+    setOpen: (open) => set({ open })
+  }));
+}
+var useDropdownStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error(
+      "Component must be used within a DropdownMenu (store is missing)"
+    );
+  }
+  return externalStore;
+};
+var injectStore = (children, store) => {
+  return import_react.Children.map(children, (child) => {
+    if ((0, import_react.isValidElement)(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.props.children) {
+        newProps.children = injectStore(typedChild.props.children, store);
+      }
+      return (0, import_react.cloneElement)(typedChild, newProps);
+    }
+    return child;
+  });
+};
+var DropdownMenu = ({
+  children,
+  open: propOpen,
+  onOpenChange
+}) => {
+  const storeRef = (0, import_react.useRef)(null);
+  storeRef.current ??= createDropdownStore();
+  const store = storeRef.current;
+  const { open, setOpen: storeSetOpen } = (0, import_zustand.useStore)(store, (s) => s);
+  const setOpen = (newOpen) => {
+    storeSetOpen(newOpen);
+  };
+  const menuRef = (0, import_react.useRef)(null);
+  const handleArrowDownOrArrowUp = (event) => {
+    const menuContent = menuRef.current?.querySelector('[role="menu"]');
+    if (menuContent) {
+      event.preventDefault();
+      const items = Array.from(
+        menuContent.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        )
+      ).filter((el) => el instanceof HTMLElement);
+      if (items.length === 0) return;
+      const focusedItem = document.activeElement;
+      const currentIndex = items.findIndex((item) => item === focusedItem);
+      let nextIndex;
+      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();
+    }
+  };
+  const handleDownkey = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      handleArrowDownOrArrowUp(event);
+    }
+  };
+  const handleClickOutside = (event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleDownkey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleDownkey);
+    };
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    setOpen(open);
+    onOpenChange?.(open);
+  }, [open, onOpenChange]);
+  (0, import_react.useEffect)(() => {
+    if (propOpen) {
+      setOpen(propOpen);
+    }
+  }, [propOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
+};
+var DropdownMenuTrigger = ({
+  className,
+  children,
+  onClick,
+  store: externalStore,
+  ...props
+}) => {
+  const store = useDropdownStore(externalStore);
+  const open = (0, import_zustand.useStore)(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleOpen();
+        if (onClick) onClick(e);
+      },
+      "aria-expanded": open,
+      className: cn(className),
+      ...props,
+      children
+    }
+  );
+};
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var ITEM_SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md"
+};
+var SIDE_CLASSES = {
+  top: "bottom-full",
+  right: "top-full",
+  bottom: "top-full",
+  left: "top-full"
+};
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+var MENUCONTENT_VARIANT_CLASSES = {
+  menu: "p-1",
+  profile: "p-6"
+};
+var MenuLabel = (0, import_react.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("text-sm w-full", inset ? "pl-8" : "", className),
+      ...props
+    }
+  );
+});
+MenuLabel.displayName = "MenuLabel";
+var DropdownMenuContent = (0, import_react.forwardRef)(
+  ({
+    className,
+    align = "start",
+    side = "bottom",
+    variant = "menu",
+    sideOffset = 4,
+    children,
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useDropdownStore(externalStore);
+    const open = (0, import_zustand.useStore)(store, (s) => s.open);
+    const [isVisible, setIsVisible] = (0, import_react.useState)(open);
+    (0, import_react.useEffect)(() => {
+      if (open) {
+        setIsVisible(true);
+      } else {
+        const timer = setTimeout(() => setIsVisible(false), 200);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+    if (!isVisible) return null;
+    const getPositionClasses = () => {
+      const vertical = SIDE_CLASSES[side];
+      const horizontal = ALIGN_CLASSES[align];
+      return `absolute ${vertical} ${horizontal}`;
+    };
+    const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref,
+        role: "menu",
+        className: `
+        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
+        ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
+        ${getPositionClasses()}
+        ${variantClasses}
+        ${className}
+      `,
+        style: {
+          marginTop: side === "bottom" ? sideOffset : void 0,
+          marginBottom: side === "top" ? sideOffset : void 0,
+          marginLeft: side === "right" ? sideOffset : void 0,
+          marginRight: side === "left" ? sideOffset : void 0
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = (0, import_react.forwardRef)(
+  ({
+    className,
+    size = "small",
+    children,
+    iconRight,
+    iconLeft,
+    disabled = false,
+    onClick,
+    variant = "menu",
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useDropdownStore(externalStore);
+    const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
+    const sizeClasses = ITEM_SIZE_CLASSES[size];
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick?.(e);
+      setOpen(false);
+    };
+    const getVariantClasses = () => {
+      if (variant === "profile") {
+        return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
+      }
+      return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
+    };
+    const getVariantProps = () => {
+      return variant === "profile" ? { "data-variant": "profile" } : {};
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        ...getVariantProps(),
+        "aria-disabled": disabled,
+        className: `
+          focus-visible:bg-background-50
+           ${getVariantClasses()}
+          ${sizeClasses}
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        children: [
+          iconLeft,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-full text-md", children }),
+          iconRight
+        ]
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = (0, import_react.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("my-1 h-px bg-border-200", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var ProfileMenuTrigger = (0, import_react.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
+  const store = useDropdownStore(externalStore);
+  const open = (0, import_zustand.useStore)(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ref,
+      className: cn(
+        "rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer",
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleOpen();
+        onClick?.(e);
+      },
+      "aria-expanded": open,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.User, { className: "text-primary-950", size: 18 }) })
+    }
+  );
+});
+ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
+var ProfileMenuHeader = (0, import_react.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref,
+      "data-component": "ProfileMenuHeader",
+      className: cn("flex flex-row gap-4 items-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.User, { size: 34, className: "text-primary-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-md text-text-600", children: email })
+        ] })
+      ]
+    }
+  );
+});
+ProfileMenuHeader.displayName = "ProfileMenuHeader";
+var ProfileMenuSection = (0, import_react.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("flex flex-col p-2", className), ...props, children });
+});
+ProfileMenuSection.displayName = "ProfileMenuSection";
+var ProfileMenuFooter = ({
+  className,
+  disabled = false,
+  onClick,
+  store: externalStore,
+  ...props
+}) => {
+  const store = useDropdownStore(externalStore);
+  const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Button_default,
+    {
+      variant: "outline",
+      className: cn("w-full", className),
+      disabled,
+      onClick: (e) => {
+        setOpen(false);
+        onClick?.(e);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.SignOut, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Sair" })
+      ]
+    }
+  );
+};
+ProfileMenuFooter.displayName = "ProfileMenuFooter";
+var DropdownMenu_default = DropdownMenu;
+
+// src/components/Skeleton/Skeleton.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SKELETON_ANIMATION_CLASSES = {
+  pulse: "animate-pulse",
+  none: ""
+};
+var SKELETON_VARIANT_CLASSES = {
+  text: "h-4 bg-background-200 rounded",
+  circular: "bg-background-200 rounded-full",
+  rectangular: "bg-background-200",
+  rounded: "bg-background-200 rounded-lg"
+};
+var SPACING_CLASSES = {
+  none: "",
+  small: "space-y-1",
+  medium: "space-y-2",
+  large: "space-y-3"
+};
+var Skeleton = (0, import_react2.forwardRef)(
+  ({
+    variant = "text",
+    width,
+    height,
+    animation = "pulse",
+    lines = 1,
+    spacing = "none",
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const animationClass = SKELETON_ANIMATION_CLASSES[animation];
+    const variantClass = SKELETON_VARIANT_CLASSES[variant];
+    const spacingClass = SPACING_CLASSES[spacing];
+    const style = {
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height
+    };
+    if (variant === "text" && lines > 1) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col", spacingClass, className),
+          ...props,
+          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: cn(variantClass, animationClass),
+              style: index === lines - 1 ? { width: "60%" } : void 0
+            },
+            index
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(variantClass, animationClass, className),
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var SkeletonText = (0, import_react2.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { ref, variant: "text", ...props })
+);
+var SkeletonCircle = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { ref, variant: "circular", ...props }));
+var SkeletonRectangle = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
+var SkeletonRounded = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
+var SkeletonCard = (0, import_react2.forwardRef)(
+  ({
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    showActions = true,
+    lines = 2,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full p-4 bg-background border border-border-200 rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start space-x-3", children: [
+            showAvatar && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonCircle, { width: 40, height: 40 }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 space-y-2", children: [
+              showTitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonText, { width: "60%", height: 20 }),
+              showDescription && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonText, { lines, spacing: "small" })
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonRectangle, { width: 80, height: 32 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var SkeletonList = (0, import_react2.forwardRef)(
+  ({
+    items = 3,
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    lines = 1,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
+      showAvatar && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonCircle, { width: 32, height: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 space-y-2", children: [
+        showTitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonText, { width: "40%", height: 16 }),
+        showDescription && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonText, { lines, spacing: "small" })
+      ] })
+    ] }, index)) });
+  }
+);
+var SkeletonTable = (0, import_react2.forwardRef)(
+  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 20
+        },
+        index
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 16
+        },
+        colIndex
+      )) }, rowIndex)) })
+    ] });
+  }
+);
+
+// src/components/NotificationCard/NotificationCard.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SingleNotificationCard = ({
+  title,
+  message,
+  time,
+  isRead,
+  onMarkAsRead,
+  onDelete,
+  onNavigate,
+  actionLabel,
+  className
+}) => {
+  const handleMarkAsRead = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isRead) {
+      onMarkAsRead();
+    }
+  };
+  const handleDelete = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onDelete();
+  };
+  const handleNavigate = (e) => {
+    e.stopPropagation();
+    if (onNavigate) {
+      onNavigate();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col justify-center items-start p-4 gap-2 w-full bg-background border-b border-border-200",
+        "last:border-b-0",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
+          !isRead && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(DropdownMenu_default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              DropdownMenuTrigger,
+              {
+                className: "flex-shrink-0 inline-flex items-center justify-center font-medium bg-transparent text-text-950 cursor-pointer hover:bg-info-50 w-6 h-6 rounded-lg",
+                "aria-label": "Menu de a\xE7\xF5es",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.DotsThreeVertical, { size: 24 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+              !isRead && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                DropdownMenuItem,
+                {
+                  onClick: handleMarkAsRead,
+                  className: "text-text-950",
+                  children: "Marcar como lida"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-medium text-text-400", children: time }),
+          onNavigate && actionLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleNavigate,
+              className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
+              children: actionLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var NotificationEmpty = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "img",
+      {
+        src: no_notification_result_default,
+        alt: "Sem notifica\xE7\xF5es",
+        width: 82,
+        height: 82,
+        className: "object-contain"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: "Nenhuma notifica\xE7\xE3o no momento" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!" })
+  ] });
+};
+var NotificationList = ({
+  groupedNotifications = [],
+  loading = false,
+  error = null,
+  onRetry,
+  onMarkAsReadById,
+  onDeleteById,
+  onNavigateById,
+  getActionLabel,
+  renderEmpty,
+  className
+}) => {
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-error-600", children: error }),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onRetry,
+          className: "text-sm text-info-600 hover:text-info-700",
+          children: "Tentar novamente"
+        }
+      )
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
+      (skeletonId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        SkeletonCard,
+        {
+          className: "p-4 border-b border-border-200"
+        },
+        skeletonId
+      )
+    ) });
+  }
+  if (!groupedNotifications || groupedNotifications.length === 0) {
+    return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NotificationEmpty, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
+    group.notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SingleNotificationCard,
+      {
+        title: notification.title,
+        message: notification.message,
+        time: notification.time,
+        isRead: notification.isRead,
+        onMarkAsRead: () => onMarkAsReadById?.(notification.id),
+        onDelete: () => onDeleteById?.(notification.id),
+        onNavigate: notification.entityType && notification.entityId && onNavigateById ? () => onNavigateById(
+          notification.entityType,
+          notification.entityId
+        ) : void 0,
+        actionLabel: getActionLabel?.(notification.entityType)
+      },
+      notification.id
+    ))
+  ] }, `${group.label}-${idx}`)) });
+};
+var NotificationCard = (props) => {
+  if (props.groupedNotifications !== void 0 || props.notifications !== void 0 || props.loading || props.error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      NotificationList,
+      {
+        ...props,
+        groupedNotifications: props.groupedNotifications ?? (props.notifications ? [{ label: "Notifica\xE7\xF5es", notifications: props.notifications }] : [])
+      }
+    );
+  }
+  if (props.title !== void 0 && props.message !== void 0 && props.time !== void 0 && props.isRead !== void 0 && props.onMarkAsRead && props.onDelete) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SingleNotificationCard,
+      {
+        title: props.title,
+        message: props.message,
+        time: props.time,
+        isRead: props.isRead,
+        onMarkAsRead: props.onMarkAsRead,
+        onDelete: props.onDelete,
+        onNavigate: props.onNavigate,
+        actionLabel: props.actionLabel,
+        className: props.className
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-text-600", children: "Nenhuma notifica\xE7\xE3o configurada" }) });
+};
+var NotificationCard_default = NotificationCard;
+//# sourceMappingURL=index.js.map