analytica-frontend-lib 1.0.38 → 1.0.40

package/dist/index.d.ts

@@ -12,102 +12,15 @@ export { default as Radio } from './Radio/index.js';
 export { default as TextArea } from './TextArea/index.js';
 export { default as Toast } from './Toast/index.js';
 export { default as Toaster } from './Toast/Toaster/index.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
+export { default as Divider } from './Divider/index.js';
 export { default as useToastStore } from './Toast/ToastStore/index.js';
+export { default as Input } from './Input/index.js';
+export { default as Chips } from './Chips/index.js';
 export { default as ProgressBar } from './ProgressBar/index.js';
 export { default as ProgressCircle } from './ProgressCircle/index.js';
-export { default as DropdownMenu, DropdownMenuTrigger, MenuContent, MenuItem, MenuLabel, MenuSeparator, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js';
+export { default as DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuContent, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
+export { default as Menu, MenuItem, MenuSeparator } from './Menu/index.js';
+import 'react/jsx-runtime';
+import 'react';
 import 'zustand';
-
-/**
- * Divider component props interface
- */
-type DividerProps = {
-    /** Orientation of the divider */
-    orientation?: 'horizontal' | 'vertical';
-    /** Additional CSS classes to apply */
-    className?: string;
-} & HTMLAttributes<HTMLHRElement>;
-/**
- * Divider component for Analytica Ensino platforms
- *
- * A simple divider component that creates a visual separation between content sections.
- * Can be used both horizontally and vertically.
- *
- * @param orientation - The orientation of the divider (horizontal or vertical)
- * @param className - Additional CSS classes
- * @param props - All other standard hr HTML attributes
- * @returns A styled divider element
- *
- * @example
- * ```tsx
- * <Divider orientation="horizontal" />
- * <Divider orientation="vertical" className="h-8" />
- * ```
- */
-declare const Divider: ({ orientation, className, ...props }: DividerProps) => react_jsx_runtime.JSX.Element;
-
-declare const Input: react.ForwardRefExoticComponent<{
-    /** Label text displayed above the input */
-    label?: string;
-    /** Helper text displayed below the input */
-    helperText?: string;
-    /** Error message displayed below the input */
-    errorMessage?: string;
-    /** Size of the input */
-    size?: "small" | "medium" | "large" | "extra-large";
-    /** Visual variant of the input */
-    variant?: "outlined" | "underlined" | "rounded";
-    /** Current state of the input */
-    state?: "default" | "error" | "disabled" | "read-only";
-    /** Icon to display on the left side of the input */
-    iconLeft?: ReactNode;
-    /** Icon to display on the right side of the input */
-    iconRight?: ReactNode;
-    /** Additional CSS classes to apply to the input */
-    className?: string;
-    /** Additional CSS classes to apply to the container */
-    containerClassName?: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & react.RefAttributes<HTMLInputElement>>;
-
-/**
- * Chips component props interface
- */
-type ChipsProps = {
-    /** Content to be displayed inside the chip */
-    children: ReactNode;
-    /** Se o chip está selecionado (mostra check automaticamente) */
-    selected?: boolean;
-    /** Additional CSS classes to apply */
-    className?: string;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
-/**
- * Chips component for Analytica Ensino platforms
- *
- * Um componente de chip seguindo exatamente o design do Figma.
- * Suporte a dois estados principais: default (sem ícone) e selected (com ícone de check).
- * Quando selecionado, automaticamente mostra o ícone de check.
- *
- * @param children - O conteúdo a ser exibido dentro do chip
- * @param selected - Se o chip está selecionado (mostra check automaticamente)
- * @param className - Classes CSS adicionais
- * @param props - Todos os outros atributos padrão de button HTML
- * @returns Um elemento de chip estilizado
- *
- * @example
- * ```tsx
- * <Chips onClick={() => console.log('clicked')}>
- *   Label
- * </Chips>
- *
- * <Chips selected onClick={() => console.log('selected')}>
- *   Selected Label
- * </Chips>
- * ```
- */
-declare const Chips: ({ children, selected, className, disabled, type, ...props }: ChipsProps) => react_jsx_runtime.JSX.Element;
-
-export { Chips, Divider, Input };

package/dist/index.js

@@ -27,10 +27,13 @@ __export(src_exports, {
   Chips: () => Chips_default,
   Divider: () => Divider_default,
   DropdownMenu: () => DropdownMenu_default,
+  DropdownMenuItem: () => DropdownMenuItem,
+  DropdownMenuSeparator: () => DropdownMenuSeparator,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   IconButton: () => IconButton_default,
   IconRoundedButton: () => IconRoundedButton_default,
   Input: () => Input_default,
+  Menu: () => Menu_default,
   MenuContent: () => MenuContent,
   MenuItem: () => MenuItem,
   MenuLabel: () => MenuLabel,
@@ -2018,7 +2021,7 @@ var MenuContent = (0, import_react9.forwardRef)(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = (0, import_react9.forwardRef)(
+var DropdownMenuItem = (0, import_react9.forwardRef)(
   ({
     className,
     size = "small",
@@ -2081,8 +2084,8 @@ var MenuItem = (0, import_react9.forwardRef)(
     );
   }
 );
-MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react9.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = (0, import_react9.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   "div",
   {
     ref,
@@ -2090,7 +2093,7 @@ var MenuSeparator = (0, import_react9.forwardRef)(({ className, store: _store, .
     ...props
   }
 ));
-MenuSeparator.displayName = "MenuSeparator";
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var ProfileMenuTrigger = (0, import_react9.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
@@ -2459,6 +2462,170 @@ var SelectItem = (0, import_react10.forwardRef)(
 );
 SelectItem.displayName = "SelectItem";
 var Select_default = Select;
+
+// src/components/Menu/Menu.tsx
+var import_zustand4 = require("zustand");
+var import_react11 = require("react");
+var import_phosphor_react9 = require("phosphor-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var createMenuStore = () => (0, import_zustand4.create)((set) => ({
+  value: "",
+  setValue: (value) => set({ value })
+}));
+var useMenuStore = (externalStore) => {
+  if (!externalStore) throw new Error("MenuItem must be inside Menu");
+  return externalStore;
+};
+var VARIANT_CLASSES5 = {
+  menu: "bg-background shadow-soft-shadow-1",
+  menu2: "overflow-x-auto scroll-smooth",
+  breadcrumb: ""
+};
+var Menu = (0, import_react11.forwardRef)(
+  ({
+    className,
+    children,
+    defaultValue,
+    value: propValue,
+    variant = "menu",
+    onValueChange,
+    ...props
+  }, ref) => {
+    const storeRef = (0, import_react11.useRef)(null);
+    storeRef.current ??= createMenuStore();
+    const store = storeRef.current;
+    const { setValue, value } = (0, import_zustand4.useStore)(store, (s) => s);
+    (0, import_react11.useEffect)(() => {
+      setValue(propValue ?? defaultValue);
+    }, [defaultValue, propValue, setValue]);
+    (0, import_react11.useEffect)(() => {
+      onValueChange?.(value);
+    }, [value, onValueChange]);
+    const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
+    const variantClasses = VARIANT_CLASSES5[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "ul",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        ...props,
+        children: injectStore3(children, store)
+      }
+    );
+  }
+);
+Menu.displayName = "Menu";
+var MenuItem = (0, import_react11.forwardRef)(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    variant = "menu",
+    ...props
+  }, ref) => {
+    const store = useMenuStore(externalStore);
+    const { value: selectedValue, setValue } = (0, import_zustand4.useStore)(store, (s) => s);
+    const handleClick = (e) => {
+      if (!disabled) setValue(value);
+      props.onClick?.(e);
+    };
+    const commonProps = {
+      role: "menuitem",
+      "aria-disabled": disabled,
+      ref,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (["Enter", " "].includes(e.key)) handleClick(e);
+      },
+      tabIndex: disabled ? -1 : 0,
+      ...props
+    };
+    const variants = {
+      menu: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "li",
+        {
+          "data-variant": "menu",
+          className: `
+            w-full flex flex-col gap-0.5 items-center py-1 px-2 rounded-sm font-medium text-xs
+            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
+            focus:outline-none focus:border-2-indicator-info focus:border-2
+            ${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
+            ${className ?? ""}
+          `,
+          ...commonProps,
+          children
+        }
+      ),
+      menu2: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "li",
+        {
+          "data-variant": "menu2",
+          className: `
+            flex flex-row items-center p-4 gap-2 border-b-2 border-transparent text-text-950 text-sx font-bold cursor-pointer
+            ${selectedValue === value ? "border-b-primary-950" : ""}
+          `,
+          ...commonProps,
+          children
+        }
+      ),
+      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "li",
+        {
+          "data-variant": "breadcrumb",
+          className: `
+            p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
+            focus:outline-none focus:border-indicator-info focus:border-2
+            ${selectedValue === value ? "text-primary-950" : "text-text-600"}
+            ${className ?? ""}
+          `,
+          ...commonProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "span",
+            {
+              className: `
+              border-b border-text-600 hover:border-primary-600 text-inherit
+              ${selectedValue === value ? "border-b-primary-950" : "border-b-primary-600"}
+            `,
+              children
+            }
+          )
+        }
+      )
+    };
+    return variants[variant] ?? variants["menu"];
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = (0, import_react11.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "li",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
+      ...props,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react9.CaretRight, {})
+    }
+  )
+);
+MenuSeparator.displayName = "MenuSeparator";
+var injectStore3 = (children, store) => import_react11.Children.map(children, (child) => {
+  if (!(0, import_react11.isValidElement)(child)) return child;
+  const typedChild = child;
+  const shouldInject = typedChild.type === MenuItem;
+  return (0, import_react11.cloneElement)(typedChild, {
+    ...shouldInject ? { store } : {},
+    ...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
+  });
+});
+var Menu_default = Menu;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -2468,10 +2635,13 @@ var Select_default = Select;
   Chips,
   Divider,
   DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   IconButton,
   IconRoundedButton,
   Input,
+  Menu,
   MenuContent,
   MenuItem,
   MenuLabel,