analytica-frontend-lib 1.0.19 → 1.0.21

package/dist/index.css

@@ -116,10 +116,10 @@
     --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
     --color-indicator-error: #b91c1c;
-    --color-exame-1: #e3f1fb;
-    --color-exame-2: #fde5fa;
-    --color-exame-3: #fff4d1;
-    --color-exame-4: #ddf5e5;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
     --color-typography-1: #b00c9e;
     --color-typography-2: #745A07;
     --font-weight-hairline: 100;
@@ -412,6 +412,9 @@
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -427,6 +430,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -517,6 +523,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-\[384px\] {
+    width: 384px;
+  }
   .w-full {
     width: 100%;
   }
@@ -711,6 +720,9 @@
   .border-success-500 {
     border-color: var(--color-success-500);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .border-warning-200 {
     border-color: var(--color-warning-200);
   }
@@ -738,17 +750,17 @@
   .bg-error-500 {
     background-color: var(--color-error-500);
   }
-  .bg-exame-1 {
-    background-color: var(--color-exame-1);
+  .bg-exam-1 {
+    background-color: var(--color-exam-1);
   }
-  .bg-exame-2 {
-    background-color: var(--color-exame-2);
+  .bg-exam-2 {
+    background-color: var(--color-exam-2);
   }
-  .bg-exame-3 {
-    background-color: var(--color-exame-3);
+  .bg-exam-3 {
+    background-color: var(--color-exam-3);
   }
-  .bg-exame-4 {
-    background-color: var(--color-exame-4);
+  .bg-exam-4 {
+    background-color: var(--color-exam-4);
   }
   .bg-indicator-error {
     background-color: var(--color-indicator-error);
@@ -1291,6 +1303,11 @@
       border-width: 0px;
     }
   }
+  .focus-visible\:bg-background-50 {
+    &:focus-visible {
+      background-color: var(--color-background-50);
+    }
+  }
   .focus-visible\:bg-error-500 {
     &:focus-visible {
       background-color: var(--color-error-500);
@@ -1672,10 +1689,10 @@
     --color-indicator-primary: #f7f7f7;
     --color-indicator-info: #a1c7f5;
     --color-indicator-error: #e84645;
-    --color-exame-1: #e3f1fb;
-    --color-exame-2: #fde5fa;
-    --color-exame-3: #fff4d1;
-    --color-exame-4: #ddf5e5;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
     --color-subject-1: #b7dfff;
     --color-subject-2: #fbd1a5;
     --color-subject-3: #b2e7e8;
@@ -1833,10 +1850,10 @@
     --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
     --color-indicator-error: #b91c1c;
-    --color-exame-1: #e3f1fb;
-    --color-exame-2: #fde5fa;
-    --color-exame-3: #fff4d1;
-    --color-exame-4: #ddf5e5;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
     --color-subject-1: #b7dfff;
     --color-subject-2: #fbd1a5;
     --color-subject-3: #b2e7e8;

package/dist/index.d.mts

@@ -141,7 +141,7 @@ type BaseTextProps = {
     /** Font weight variant */
     weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
     /** Color variant - white for light backgrounds, black for dark backgrounds */
-    color?: 'white' | 'black';
+    color?: string;
     /** Additional CSS classes to apply */
     className?: string;
 };
@@ -162,7 +162,7 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  * @param children - The content to display
  * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
  * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
- * @param color - The color variant (white, black) - adapts to theme
+ * @param color - The color variant - adapts to theme
  * @param as - The HTML tag to render - determines allowed attributes via TypeScript
  * @param className - Additional CSS classes
  * @param props - HTML attributes valid for the chosen tag only
@@ -170,7 +170,7 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  *
  * @example
  * ```tsx
- * <Text size="lg" weight="bold" color="black">
+ * <Text size="lg" weight="bold" color="text-info-800">
  *   This is a large, bold text
  * </Text>
  *

package/dist/index.d.ts

@@ -141,7 +141,7 @@ type BaseTextProps = {
     /** Font weight variant */
     weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
     /** Color variant - white for light backgrounds, black for dark backgrounds */
-    color?: 'white' | 'black';
+    color?: string;
     /** Additional CSS classes to apply */
     className?: string;
 };
@@ -162,7 +162,7 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  * @param children - The content to display
  * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
  * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
- * @param color - The color variant (white, black) - adapts to theme
+ * @param color - The color variant - adapts to theme
  * @param as - The HTML tag to render - determines allowed attributes via TypeScript
  * @param className - Additional CSS classes
  * @param props - HTML attributes valid for the chosen tag only
@@ -170,7 +170,7 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  *
  * @example
  * ```tsx
- * <Text size="lg" weight="bold" color="black">
+ * <Text size="lg" weight="bold" color="text-info-800">
  *   This is a large, bold text
  * </Text>
  *

package/dist/index.js

@@ -207,14 +207,13 @@ var Text = ({
   children,
   size = "md",
   weight = "normal",
-  color = "black",
+  color = "text-text-950",
   as,
   className = "",
   ...props
 }) => {
   let sizeClasses = "";
   let weightClasses = "";
-  let colorClasses = "";
   const sizeClassMap = {
     "2xs": "text-2xs",
     xs: "text-xs",
@@ -240,17 +239,12 @@ var Text = ({
     black: "font-black"
   };
   weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
-  const colorClassMap = {
-    white: "text-text",
-    black: "text-text-950"
-  };
-  colorClasses = colorClassMap[color] ?? colorClassMap.black;
   const baseClasses = "font-primary";
   const Component = as ?? "p";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Component,
     {
-      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${colorClasses} ${className}`,
+      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
       ...props,
       children
     }
@@ -276,10 +270,10 @@ var VARIANT_ACTION_CLASSES2 = {
     muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
   },
   exams: {
-    exam1: "bg-exame-1 text-info-200 focus-visible:outline-none",
-    exam2: "bg-exame-2 text-typography-1 focus-visible:outline-none",
-    exam3: "bg-exame-3 text-typography-2 focus-visible:outline-none",
-    exam4: "bg-exame-4 text-success-700 focus-visible:outline-none"
+    exam1: "bg-exam-1 text-info-200 focus-visible:outline-none",
+    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
+    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
+    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
   },
   resultStatus: {
     negative: "bg-error text-error-800 focus-visible:outline-none",
@@ -497,7 +491,6 @@ var CheckBox = (0, import_react2.forwardRef)(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    color: "black",
                     className: `cursor-pointer select-none leading-[150%] flex items-center font-roboto ${labelClassName}`,
                     children: label
                   }
@@ -507,8 +500,26 @@ var CheckBox = (0, import_react2.forwardRef)(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
-      helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
     ] });
   }
 );
@@ -630,9 +641,32 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     [isControlled, onOpenChange]
   );
   const menuRef = (0, import_react4.useRef)(null);
-  const handleEscape = (event) => {
+  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) => {
@@ -643,11 +677,11 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
   (0, import_react4.useEffect)(() => {
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("keydown", handleDownkey);
     }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
   const value = (0, import_react4.useMemo)(
@@ -780,6 +814,7 @@ var MenuItem = (0, import_react4.forwardRef)(
         role: "menuitem",
         "aria-disabled": disabled,
         className: `
+          focus-visible:bg-background-50
           relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
           ${inset && "pl-8"}
           ${sizeClasses}

package/dist/index.mjs

@@ -156,14 +156,13 @@ var Text = ({
   children,
   size = "md",
   weight = "normal",
-  color = "black",
+  color = "text-text-950",
   as,
   className = "",
   ...props
 }) => {
   let sizeClasses = "";
   let weightClasses = "";
-  let colorClasses = "";
   const sizeClassMap = {
     "2xs": "text-2xs",
     xs: "text-xs",
@@ -189,17 +188,12 @@ var Text = ({
     black: "font-black"
   };
   weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
-  const colorClassMap = {
-    white: "text-text",
-    black: "text-text-950"
-  };
-  colorClasses = colorClassMap[color] ?? colorClassMap.black;
   const baseClasses = "font-primary";
   const Component = as ?? "p";
   return /* @__PURE__ */ jsx4(
     Component,
     {
-      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${colorClasses} ${className}`,
+      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
       ...props,
       children
     }
@@ -225,10 +219,10 @@ var VARIANT_ACTION_CLASSES2 = {
     muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
   },
   exams: {
-    exam1: "bg-exame-1 text-info-200 focus-visible:outline-none",
-    exam2: "bg-exame-2 text-typography-1 focus-visible:outline-none",
-    exam3: "bg-exame-3 text-typography-2 focus-visible:outline-none",
-    exam4: "bg-exame-4 text-success-700 focus-visible:outline-none"
+    exam1: "bg-exam-1 text-info-200 focus-visible:outline-none",
+    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
+    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
+    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
   },
   resultStatus: {
     negative: "bg-error text-error-800 focus-visible:outline-none",
@@ -450,7 +444,6 @@ var CheckBox = forwardRef2(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    color: "black",
                     className: `cursor-pointer select-none leading-[150%] flex items-center font-roboto ${labelClassName}`,
                     children: label
                   }
@@ -460,8 +453,26 @@ var CheckBox = forwardRef2(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx6(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
-      helperText && !errorMessage && /* @__PURE__ */ jsx6(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
+      errorMessage && /* @__PURE__ */ jsx6(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ jsx6(
+        Text,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
     ] });
   }
 );
@@ -592,9 +603,32 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     [isControlled, onOpenChange]
   );
   const menuRef = useRef(null);
-  const handleEscape = (event) => {
+  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) => {
@@ -605,11 +639,11 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
   useEffect(() => {
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("keydown", handleDownkey);
     }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
   const value = useMemo(
@@ -742,6 +776,7 @@ var MenuItem = forwardRef4(
         role: "menuitem",
         "aria-disabled": disabled,
         className: `
+          focus-visible:bg-background-50
           relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
           ${inset && "pl-8"}
           ${sizeClasses}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",