analytica-frontend-lib 1.0.16 → 1.0.18

package/dist/index.mjs

@@ -206,25 +206,309 @@ var Text = ({
   );
 };
 
-// src/components/Table/Table.tsx
-import { forwardRef as forwardRef2 } from "react";
+// src/components/Toast/Toast.tsx
+import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var Table = forwardRef2(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx5("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs3(
+var VARIANT_ACTION_CLASSES2 = {
+  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_CLASSES2[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__ */ jsxs3(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ jsx5("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx5(IconAction, {}) }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ jsx5("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ jsx5("p", { className: "text-md text-text-900", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: onClose,
+            "aria-label": "Dismiss notification",
+            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ jsx5(X, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Toast/utils/ToastStore.ts
+import { create } from "zustand";
+var useToastStore = create((set) => ({
+  toasts: [],
+  addToast: (toast) => {
+    const id = crypto.randomUUID();
+    set((state) => ({
+      toasts: [...state.toasts, { id, ...toast }]
+    }));
+  },
+  removeToast: (id) => {
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id)
+    }));
+  }
+}));
+
+// src/components/Toast/utils/Toaster.tsx
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
+var Toaster = () => {
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return /* @__PURE__ */ jsx6(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx6(
+    Toast,
+    {
+      title: toast.title,
+      description: toast.description,
+      variant: toast.variant,
+      action: toast.action,
+      position: toast.position,
+      onClose: () => removeToast(toast.id)
+    },
+    toast.id
+  )) });
+};
+var useToast = () => {
+  const addToast = useToastStore((state) => state.addToast);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return { addToast, removeToast };
+};
+
+// src/components/CheckBox/CheckBox.tsx
+import {
+  forwardRef as forwardRef2,
+  useState,
+  useId
+} from "react";
+import { Check, Minus } from "phosphor-react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIZE_CLASSES2 = {
+  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_CLASSES2[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__ */ jsx7(
+          Minus,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      if (checked) {
+        return /* @__PURE__ */ jsx7(
+          Check,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                id: inputId,
+                checked,
+                disabled,
+                onChange: handleChange,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx7("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ jsx7(
+              "div",
+              {
+                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                children: /* @__PURE__ */ jsx7(
+                  Text,
+                  {
+                    as: "label",
+                    htmlFor: inputId,
+                    size: sizeClasses.textSize,
+                    weight: "normal",
+                    color: "black",
+                    className: `cursor-pointer select-none leading-[150%] flex items-center font-roboto ${labelClassName}`,
+                    children: label
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx7(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperText && !errorMessage && /* @__PURE__ */ jsx7(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
+    ] });
+  }
+);
+CheckBox.displayName = "CheckBox";
+
+// src/components/Table/Table.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var Table = forwardRef3(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx8("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs5(
     "table",
     {
       ref,
       className: `w-full caption-bottom text-sm ${className ?? ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx5("caption", { className: "sr-only", children: "My Table" }),
+        /* @__PURE__ */ jsx8("caption", { className: "sr-only", children: "My Table" }),
         children
       ]
     }
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "thead",
   {
     ref,
@@ -233,7 +517,7 @@ var TableHeader = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "tbody",
   {
     ref,
@@ -242,7 +526,7 @@ var TableBody = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "tfoot",
   {
     ref,
@@ -257,9 +541,9 @@ var VARIANT_STATES_ROW = {
   invalid: "border-b-2 border-indicator-error",
   disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
 };
-var TableRow = forwardRef2(
+var TableRow = forwardRef3(
   ({ state = "default", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx8(
       "tr",
       {
         ref,
@@ -276,7 +560,7 @@ var TableRow = forwardRef2(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "th",
   {
     ref,
@@ -285,7 +569,7 @@ var TableHead = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "td",
   {
     ref,
@@ -294,7 +578,7 @@ var TableCell = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var TableCaption = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "caption",
   {
     ref,
@@ -307,20 +591,20 @@ TableCaption.displayName = "TableCaption";
 // src/components/DropdownMenu/DropdownMenu.tsx
 import {
   createContext,
-  useState,
+  useState as useState2,
   useCallback,
   useContext,
-  forwardRef as forwardRef3,
+  forwardRef as forwardRef4,
   useEffect,
   useRef,
   useMemo
 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var DropdownMenuContext = createContext(
   void 0
 );
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState2(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
   const setOpen = useCallback(
@@ -355,14 +639,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ jsx6(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx6("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ jsx9(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx9("div", { className: "relative", ref: menuRef, children }) });
 };
-var DropdownMenuTrigger = forwardRef3(({ className, children, onClick, ...props }, ref) => {
+var DropdownMenuTrigger = forwardRef4(({ className, children, onClick, ...props }, ref) => {
   const context = useContext(DropdownMenuContext);
   if (!context)
     throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
   const { open, setOpen } = context;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       ref,
@@ -394,7 +678,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx6(
+var MenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx9(
   "fieldset",
   {
     ref,
@@ -404,7 +688,7 @@ var MenuLabel = forwardRef3(({ className, inset, ...props }, ref) => /* @__PURE_
   }
 ));
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = forwardRef3(
+var MenuContent = forwardRef4(
   ({
     className,
     align = "start",
@@ -414,7 +698,7 @@ var MenuContent = forwardRef3(
     ...props
   }, ref) => {
     const { open } = useContext(DropdownMenuContext);
-    const [isVisible, setIsVisible] = useState(open);
+    const [isVisible, setIsVisible] = useState2(open);
     useEffect(() => {
       if (open) {
         setIsVisible(true);
@@ -429,7 +713,7 @@ var MenuContent = forwardRef3(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         ref,
@@ -453,7 +737,7 @@ var MenuContent = forwardRef3(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = forwardRef3(
+var MenuItem = forwardRef4(
   ({
     className,
     inset,
@@ -474,7 +758,7 @@ var MenuItem = forwardRef3(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref,
@@ -503,7 +787,7 @@ var MenuItem = forwardRef3(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   "div",
   {
     ref,
@@ -514,9 +798,9 @@ var MenuSeparator = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ *
 MenuSeparator.displayName = "MenuSeparator";
 
 // src/components/NavButton/NavButton.tsx
-import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var NavButton = forwardRef4(
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var NavButton = forwardRef5(
   ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
       "flex",
@@ -543,7 +827,7 @@ var NavButton = forwardRef4(
     ];
     const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
     const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs7(
       "button",
       {
         ref,
@@ -553,8 +837,8 @@ var NavButton = forwardRef4(
         "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ jsx7("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
-          /* @__PURE__ */ jsx7("span", { className: "whitespace-nowrap", children: label })
+          /* @__PURE__ */ jsx10("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ jsx10("span", { className: "whitespace-nowrap", children: label })
         ]
       }
     );
@@ -563,9 +847,9 @@ var NavButton = forwardRef4(
 NavButton.displayName = "NavButton";
 
 // src/components/IconButton/IconButton.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var IconButton = forwardRef5(
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var IconButton = forwardRef6(
   ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
       "inline-flex",
@@ -597,7 +881,7 @@ var IconButton = forwardRef5(
       ...activeClasses
     ].join(" ");
     const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx11(
       "button",
       {
         ref,
@@ -607,7 +891,7 @@ var IconButton = forwardRef5(
         "aria-pressed": active,
         "aria-label": ariaLabel,
         ...props,
-        children: /* @__PURE__ */ jsx8("span", { className: "flex items-center justify-center", children: icon })
+        children: /* @__PURE__ */ jsx11("span", { className: "flex items-center justify-center", children: icon })
       }
     );
   }
@@ -615,6 +899,7 @@ var IconButton = forwardRef5(
 IconButton.displayName = "IconButton";
 export {
   Button,
+  CheckBox,
   DropdownMenu,
   DropdownMenuTrigger,
   IconButton,
@@ -633,5 +918,9 @@ export {
   TableHead,
   TableHeader,
   TableRow,
-  Text
+  Text,
+  Toast,
+  Toaster,
+  useToast,
+  useToastStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",
@@ -64,7 +64,10 @@
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
-    "phosphor-react": "^1.4.1"
+    "phosphor-react": "^1.4.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",