analytica-frontend-lib 1.0.37 → 1.0.39

package/dist/index.d.mts

@@ -12,143 +12,14 @@ export { default as Radio } from './Radio/index.mjs';
 export { default as TextArea } from './TextArea/index.mjs';
 export { default as Toast } from './Toast/index.mjs';
 export { default as Toaster } from './Toast/Toaster/index.mjs';
-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.mjs';
 export { default as useToastStore } from './Toast/ToastStore/index.mjs';
+export { default as Input } from './Input/index.mjs';
+export { default as Chips } from './Chips/index.mjs';
 export { default as ProgressBar } from './ProgressBar/index.mjs';
 export { default as ProgressCircle } from './ProgressCircle/index.mjs';
 export { default as DropdownMenu, DropdownMenuTrigger, MenuContent, MenuItem, MenuLabel, MenuSeparator, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.mjs';
-import { StoreApi } from '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;
-
-interface SelectStore {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    value: string;
-    setValue: (value: string) => void;
-    selectedLabel: ReactNode;
-    setSelectedLabel: (label: ReactNode) => void;
-}
-type SelectStoreApi = StoreApi<SelectStore>;
-interface SelectProps {
-    children: ReactNode;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    size?: 'small' | 'medium' | 'large';
-}
-declare const Select: ({ children, defaultValue, value: propValue, onValueChange, size, }: SelectProps) => react_jsx_runtime.JSX.Element;
-declare const SelectValue: ({ placeholder, store: externalStore, }: {
-    placeholder?: string;
-    store?: SelectStoreApi;
-}) => react_jsx_runtime.JSX.Element;
-interface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    className?: string;
-    invalid?: boolean;
-    variant?: 'outlined' | 'underlined' | 'rounded';
-    store?: SelectStoreApi;
-}
-declare const SelectTrigger: react.ForwardRefExoticComponent<SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-interface SelectContentProps extends HTMLAttributes<HTMLDivElement> {
-    className?: string;
-    align?: 'start' | 'center' | 'end';
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    store?: SelectStoreApi;
-}
-declare const SelectContent: react.ForwardRefExoticComponent<SelectContentProps & react.RefAttributes<HTMLDivElement>>;
-interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
-    value: string;
-    disabled?: boolean;
-    store?: SelectStoreApi;
-}
-declare const SelectItem: react.ForwardRefExoticComponent<SelectItemProps & react.RefAttributes<HTMLDivElement>>;
-
-export { Chips, Divider, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue };
+export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.mjs';
+import 'react/jsx-runtime';
+import 'react';
+import 'zustand';

package/dist/index.d.ts

@@ -12,143 +12,14 @@ 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';
-import { StoreApi } from '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;
-
-interface SelectStore {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    value: string;
-    setValue: (value: string) => void;
-    selectedLabel: ReactNode;
-    setSelectedLabel: (label: ReactNode) => void;
-}
-type SelectStoreApi = StoreApi<SelectStore>;
-interface SelectProps {
-    children: ReactNode;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    size?: 'small' | 'medium' | 'large';
-}
-declare const Select: ({ children, defaultValue, value: propValue, onValueChange, size, }: SelectProps) => react_jsx_runtime.JSX.Element;
-declare const SelectValue: ({ placeholder, store: externalStore, }: {
-    placeholder?: string;
-    store?: SelectStoreApi;
-}) => react_jsx_runtime.JSX.Element;
-interface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    className?: string;
-    invalid?: boolean;
-    variant?: 'outlined' | 'underlined' | 'rounded';
-    store?: SelectStoreApi;
-}
-declare const SelectTrigger: react.ForwardRefExoticComponent<SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-interface SelectContentProps extends HTMLAttributes<HTMLDivElement> {
-    className?: string;
-    align?: 'start' | 'center' | 'end';
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    store?: SelectStoreApi;
-}
-declare const SelectContent: react.ForwardRefExoticComponent<SelectContentProps & react.RefAttributes<HTMLDivElement>>;
-interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
-    value: string;
-    disabled?: boolean;
-    store?: SelectStoreApi;
-}
-declare const SelectItem: react.ForwardRefExoticComponent<SelectItemProps & react.RefAttributes<HTMLDivElement>>;
-
-export { Chips, Divider, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue };
+export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'zustand';

package/dist/index.js

@@ -1907,26 +1907,32 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
-var DropdownMenuTrigger = (0, import_react9.forwardRef)(({ className, children, onClick, store: externalStore, ...props }, ref) => {
+var DropdownMenuTrigger = ({
+  className,
+  children,
+  onClick,
+  store: externalStore,
+  ...props
+}) => {
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "button",
+    Button_default,
     {
-      ref,
-      className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
+      variant: "outline",
       onClick: (e) => {
         e.stopPropagation();
         toggleOpen();
         if (onClick) onClick(e);
       },
       "aria-expanded": open,
+      className: `${className}`,
       ...props,
       children
     }
   );
-});
+};
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 var ITEM_SIZE_CLASSES = {
   small: "text-sm",
@@ -1943,6 +1949,10 @@ var ALIGN_CLASSES = {
   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_react9.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
@@ -1959,6 +1969,7 @@ var MenuContent = (0, import_react9.forwardRef)(
     className,
     align = "start",
     side = "bottom",
+    variant = "menu",
     sideOffset = 4,
     children,
     store: externalStore,
@@ -1981,15 +1992,17 @@ var MenuContent = (0, import_react9.forwardRef)(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
+    const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         ref,
         role: "menu",
         className: `
-        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100
+        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: {
@@ -2032,7 +2045,7 @@ var MenuItem = (0, import_react9.forwardRef)(
     };
     const getVariantClasses = () => {
       if (variant === "profile") {
-        return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
+        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";
     };
@@ -2061,7 +2074,7 @@ var MenuItem = (0, import_react9.forwardRef)(
         ...props,
         children: [
           iconLeft,
-          children,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "w-full text-md", children }),
           iconRight
         ]
       }
@@ -2136,29 +2149,33 @@ var ProfileMenuSection = (0, import_react9.forwardRef)(({ className, children, s
   );
 });
 ProfileMenuSection.displayName = "ProfileMenuSection";
-var ProfileMenuFooter = (0, import_react9.forwardRef)(
-  ({ className, disabled = false, onClick, store: externalStore, ...props }, ref) => {
-    const store = useDropdownStore(externalStore);
-    const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      "button",
-      {
-        ref,
-        className: `inline-flex items-center justify-center rounded-full cursor-pointer font-medium text-md px-5 py-2.5 w-full 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 ${className}`,
-        disabled,
-        onClick: (e) => {
-          setOpen(false);
-          onClick?.(e);
-        },
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react7.SignOut, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Sair" })
-        ]
-      }
-    );
-  }
-);
+var ProfileMenuFooter = ({
+  className,
+  disabled = false,
+  onClick,
+  store: externalStore,
+  ...props
+}) => {
+  const store = useDropdownStore(externalStore);
+  const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    Button_default,
+    {
+      variant: "outline",
+      className: `w-full ${className}`,
+      disabled,
+      onClick: (e) => {
+        setOpen(false);
+        onClick?.(e);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react7.SignOut, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Sair" })
+      ]
+    }
+  );
+};
 ProfileMenuFooter.displayName = "ProfileMenuFooter";
 var DropdownMenu_default = DropdownMenu;
 
@@ -2341,8 +2358,9 @@ var SelectTrigger = (0, import_react10.forwardRef)(
         ref,
         className: `
         flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2
-        ${invalid && "border-indicator-error"}
-        ${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"}
+        ${invalid && "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}
       `,
@@ -2377,7 +2395,7 @@ var SelectContent = (0, import_react10.forwardRef)(
     const store = useSelectStore(externalStore);
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     if (!open) return null;
-    const getPositionClasses = () => `absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
+    const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {