analytica-frontend-lib 1.0.38 → 1.0.40

package/dist/Input/index.mjs

@@ -0,0 +1,168 @@
+// src/components/Input/Input.tsx
+import { WarningCircle, Eye, EyeSlash } from "phosphor-react";
+import {
+  forwardRef,
+  useState,
+  useId,
+  useMemo
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md",
+  large: "text-lg",
+  "extra-large": "text-xl"
+};
+var STATE_CLASSES = {
+  default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
+  error: "border-2 border-indicator-error placeholder:text-text-600",
+  disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
+  "read-only": "border-border-300 !text-text-600 cursor-default focus:outline-none bg-background-50"
+};
+var VARIANT_CLASSES = {
+  outlined: "border rounded-lg",
+  underlined: "border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2",
+  rounded: "border rounded-full"
+};
+var getActualState = (disabled, readOnly, errorMessage, state) => {
+  if (disabled) return "disabled";
+  if (readOnly) return "read-only";
+  if (errorMessage) return "error";
+  return state || "default";
+};
+var getIconSize = (size) => {
+  const iconSizeClasses = {
+    small: "w-4 h-4",
+    medium: "w-5 h-5",
+    large: "w-6 h-6",
+    "extra-large": "w-7 h-7"
+  };
+  return iconSizeClasses[size] || iconSizeClasses.medium;
+};
+var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight) => {
+  const isPasswordType = type === "password";
+  const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;
+  let actualIconRight = iconRight;
+  let ariaLabel;
+  if (shouldShowPasswordToggle) {
+    actualIconRight = showPassword ? /* @__PURE__ */ jsx(EyeSlash, {}) : /* @__PURE__ */ jsx(Eye, {});
+    ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
+  }
+  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
+};
+var getCombinedClasses = (actualState, variant) => {
+  const stateClasses = STATE_CLASSES[actualState];
+  const variantClasses = VARIANT_CLASSES[variant];
+  if (actualState === "error" && variant === "underlined") {
+    return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
+  }
+  return `${stateClasses} ${variantClasses}`;
+};
+var Input = forwardRef(
+  ({
+    label,
+    helperText,
+    errorMessage,
+    size = "medium",
+    variant = "outlined",
+    state = "default",
+    iconLeft,
+    iconRight,
+    className = "",
+    containerClassName = "",
+    disabled,
+    readOnly,
+    id,
+    type = "text",
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const isPasswordType = type === "password";
+    const actualType = isPasswordType && showPassword ? "text" : type;
+    const actualState = getActualState(disabled, readOnly, errorMessage, state);
+    const sizeClasses = SIZE_CLASSES[size];
+    const combinedClasses = useMemo(
+      () => getCombinedClasses(actualState, variant),
+      [actualState, variant]
+    );
+    const iconSize = getIconSize(size);
+    const baseClasses = "bg-background w-full py-2 px-3 font-normal text-text-900 focus:outline-primary-950";
+    const generatedId = useId();
+    const inputId = id ?? `input-${generatedId}`;
+    const togglePasswordVisibility = () => setShowPassword(!showPassword);
+    const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
+      type,
+      disabled,
+      readOnly,
+      showPassword,
+      iconRight
+    );
+    return /* @__PURE__ */ jsxs("div", { className: `${containerClassName}`, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        iconLeft && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${iconSize} text-text-400 flex items-center justify-center`,
+            children: iconLeft
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            type: actualType,
+            className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
+            disabled,
+            readOnly,
+            "aria-invalid": actualState === "error" ? "true" : void 0,
+            ...props
+          }
+        ),
+        actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
+            onClick: togglePasswordVisibility,
+            "aria-label": ariaLabel,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
+                children: actualIconRight
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${iconSize} text-text-400 flex items-center justify-center`,
+            children: actualIconRight
+          }
+        ) }))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1.5 gap-1.5", children: [
+        helperText && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-500", children: helperText }),
+        errorMessage && /* @__PURE__ */ jsxs("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
+          /* @__PURE__ */ jsx(WarningCircle, { size: 16 }),
+          " ",
+          errorMessage
+        ] })
+      ] })
+    ] });
+  }
+);
+var Input_default = Input;
+export {
+  Input_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Input/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input/Input.tsx"],"sourcesContent":["import { WarningCircle, Eye, EyeSlash } from 'phosphor-react';\nimport {\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useState,\n  useId,\n  useMemo,\n} from 'react';\n\n/**\n * Lookup table for size classes\n */\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n  'extra-large': 'text-xl',\n} as const;\n\n/**\n * Lookup table for state classes\n */\nconst STATE_CLASSES = {\n  default:\n    'border-border-300 placeholder:text-text-600 hover:border-border-400',\n  error: 'border-2 border-indicator-error placeholder:text-text-600',\n  disabled:\n    'border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40',\n  'read-only':\n    'border-border-300 !text-text-600 cursor-default focus:outline-none bg-background-50',\n} as const;\n\n/**\n * Lookup table for variant classes\n */\nconst VARIANT_CLASSES = {\n  outlined: 'border rounded-lg',\n  underlined:\n    'border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2',\n  rounded: 'border rounded-full',\n} as const;\n\n/**\n * Input component props interface\n */\ntype InputProps = {\n  /** Label text displayed above the input */\n  label?: string;\n  /** Helper text displayed below the input */\n  helperText?: string;\n  /** Error message displayed below the input */\n  errorMessage?: string;\n  /** Size of the input */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /** Visual variant of the input */\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  /** Current state of the input */\n  state?: 'default' | 'error' | 'disabled' | 'read-only';\n  /** Icon to display on the left side of the input */\n  iconLeft?: ReactNode;\n  /** Icon to display on the right side of the input */\n  iconRight?: ReactNode;\n  /** Additional CSS classes to apply to the input */\n  className?: string;\n  /** Additional CSS classes to apply to the container */\n  containerClassName?: string;\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;\n\n/**\n * Input component for Analytica Ensino platforms\n *\n * A flexible input component with multiple sizes, states, and support for icons.\n * Includes label, helper text, and error message functionality.\n * Features automatic password visibility toggle for password inputs.\n *\n * @param label - Optional label text displayed above the input\n * @param helperText - Optional helper text displayed below the input\n * @param errorMessage - Optional error message displayed below the input\n * @param size - The size variant (small, medium, large, extra-large)\n * @param variant - The visual variant (outlined, underlined, rounded)\n * @param state - The current state (default, error, disabled, read-only)\n * @param iconLeft - Optional icon displayed on the left side\n * @param iconRight - Optional icon displayed on the right side (overridden by password toggle for password inputs)\n * @param type - Input type (text, email, password, etc.) - password type automatically includes show/hide toggle\n * @param className - Additional CSS classes for the input\n * @param containerClassName - Additional CSS classes for the container\n * @param props - All other standard input HTML attributes\n * @returns A styled input element with optional label and helper text\n *\n * @example\n * ```tsx\n * // Basic input\n * <Input\n *   label=\"Email\"\n *   placeholder=\"Digite seu email\"\n *   helperText=\"Usaremos apenas para contato\"\n *   size=\"medium\"\n *   variant=\"outlined\"\n *   state=\"default\"\n * />\n *\n * // Password input with automatic toggle\n * <Input\n *   label=\"Senha\"\n *   type=\"password\"\n *   placeholder=\"Digite sua senha\"\n *   helperText=\"Clique no olho para mostrar/ocultar\"\n * />\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst getActualState = (\n  disabled?: boolean,\n  readOnly?: boolean,\n  errorMessage?: string,\n  state?: string\n): keyof typeof STATE_CLASSES => {\n  if (disabled) return 'disabled';\n  if (readOnly) return 'read-only';\n  if (errorMessage) return 'error';\n  return (state as keyof typeof STATE_CLASSES) || 'default';\n};\n\nconst getIconSize = (size: string) => {\n  const iconSizeClasses = {\n    small: 'w-4 h-4',\n    medium: 'w-5 h-5',\n    large: 'w-6 h-6',\n    'extra-large': 'w-7 h-7',\n  };\n  return (\n    iconSizeClasses[size as keyof typeof iconSizeClasses] ||\n    iconSizeClasses.medium\n  );\n};\n\nconst getPasswordToggleConfig = (\n  type?: string,\n  disabled?: boolean,\n  readOnly?: boolean,\n  showPassword?: boolean,\n  iconRight?: ReactNode\n) => {\n  const isPasswordType = type === 'password';\n  const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;\n\n  let actualIconRight = iconRight;\n  let ariaLabel: string | undefined;\n\n  if (shouldShowPasswordToggle) {\n    actualIconRight = showPassword ? <EyeSlash /> : <Eye />;\n    ariaLabel = showPassword ? 'Ocultar senha' : 'Mostrar senha';\n  }\n\n  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };\n};\n\nconst getCombinedClasses = (\n  actualState: keyof typeof STATE_CLASSES,\n  variant: keyof typeof VARIANT_CLASSES\n) => {\n  const stateClasses = STATE_CLASSES[actualState];\n  const variantClasses = VARIANT_CLASSES[variant];\n\n  // Special case: error state with underlined variant\n  if (actualState === 'error' && variant === 'underlined') {\n    return 'border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600';\n  }\n\n  return `${stateClasses} ${variantClasses}`;\n};\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      helperText,\n      errorMessage,\n      size = 'medium',\n      variant = 'outlined',\n      state = 'default',\n      iconLeft,\n      iconRight,\n      className = '',\n      containerClassName = '',\n      disabled,\n      readOnly,\n      id,\n      type = 'text',\n      ...props\n    },\n    ref\n  ) => {\n    // State for password visibility toggle\n    const [showPassword, setShowPassword] = useState(false);\n    const isPasswordType = type === 'password';\n    const actualType = isPasswordType && showPassword ? 'text' : type;\n    const actualState = getActualState(disabled, readOnly, errorMessage, state);\n\n    // Get classes from lookup tables\n    const sizeClasses = SIZE_CLASSES[size];\n    const combinedClasses = useMemo(\n      () => getCombinedClasses(actualState, variant),\n      [actualState, variant]\n    );\n    const iconSize = getIconSize(size);\n\n    const baseClasses =\n      'bg-background w-full py-2 px-3 font-normal text-text-900 focus:outline-primary-950';\n\n    // Generate unique ID if not provided\n    const generatedId = useId();\n    const inputId = id ?? `input-${generatedId}`;\n\n    // Handle password visibility toggle\n    const togglePasswordVisibility = () => setShowPassword(!showPassword);\n\n    // Get password toggle configuration\n    const { shouldShowPasswordToggle, actualIconRight, ariaLabel } =\n      getPasswordToggleConfig(\n        type,\n        disabled,\n        readOnly,\n        showPassword,\n        iconRight\n      );\n\n    return (\n      <div className={`${containerClassName}`}>\n        {/* Label */}\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={`block font-bold text-text-900 mb-1.5 ${sizeClasses}`}\n          >\n            {label}\n          </label>\n        )}\n\n        {/* Input Container */}\n        <div className=\"relative\">\n          {/* Left Icon */}\n          {iconLeft && (\n            <div className=\"absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none\">\n              <span\n                className={`${iconSize} text-text-400 flex items-center justify-center`}\n              >\n                {iconLeft}\n              </span>\n            </div>\n          )}\n\n          {/* Input Field */}\n          <input\n            ref={ref}\n            id={inputId}\n            type={actualType}\n            className={`${baseClasses} ${sizeClasses} ${combinedClasses} ${\n              iconLeft ? 'pl-10' : ''\n            } ${actualIconRight ? 'pr-10' : ''} ${className}`}\n            disabled={disabled}\n            readOnly={readOnly}\n            aria-invalid={actualState === 'error' ? 'true' : undefined}\n            {...props}\n          />\n\n          {/* Right Icon */}\n          {actualIconRight &&\n            (shouldShowPasswordToggle ? (\n              <button\n                type=\"button\"\n                className=\"absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0\"\n                onClick={togglePasswordVisibility}\n                aria-label={ariaLabel}\n              >\n                <span\n                  className={`${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`}\n                >\n                  {actualIconRight}\n                </span>\n              </button>\n            ) : (\n              <div className=\"absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none\">\n                <span\n                  className={`${iconSize} text-text-400 flex items-center justify-center`}\n                >\n                  {actualIconRight}\n                </span>\n              </div>\n            ))}\n        </div>\n\n        {/* Helper Text or Error Message */}\n        <div className=\"mt-1.5 gap-1.5\">\n          {helperText && <p className=\"text-sm text-text-500\">{helperText}</p>}\n          {errorMessage && (\n            <p className=\"flex gap-1 items-center text-sm text-indicator-error\">\n              <WarningCircle size={16} /> {errorMessage}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default Input;\n"],"mappings":"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","names":[]}

package/dist/Menu/index.d.mts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { StoreApi } from 'zustand';
+
+interface MenuStore {
+    value: string;
+    setValue: (value: string) => void;
+}
+type MenuStoreApi = StoreApi<MenuStore>;
+declare const useMenuStore: (externalStore?: MenuStoreApi) => MenuStoreApi;
+interface MenuProps extends HTMLAttributes<HTMLUListElement> {
+    children: ReactNode;
+    defaultValue: string;
+    value?: string;
+    variant?: 'menu' | 'menu2' | 'breadcrumb';
+    onValueChange?: (value: string) => void;
+}
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLUListElement>>;
+interface MenuItemProps extends HTMLAttributes<HTMLLIElement> {
+    value: string;
+    disabled?: boolean;
+    store?: MenuStoreApi;
+    variant?: 'menu' | 'menu2' | 'breadcrumb';
+}
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLLIElement>>;
+declare const MenuItemIcon: ({ className, icon, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    icon: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const MenuSeparator: react.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
+declare const internalScroll: (container: HTMLUListElement | null, direction: "left" | "right") => void;
+declare const internalCheckScroll: (container: HTMLUListElement | null, setShowLeftArrow: (v: boolean) => void, setShowRightArrow: (v: boolean) => void) => void;
+interface MenuOverflowProps extends HTMLAttributes<HTMLUListElement> {
+    children: ReactNode;
+    defaultValue: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+declare const MenuOverflow: ({ children, className, defaultValue, value, onValueChange, ...props }: MenuOverflowProps) => react_jsx_runtime.JSX.Element;
+
+export { Menu, MenuItem, MenuItemIcon, MenuOverflow, MenuSeparator, Menu as default, internalCheckScroll, internalScroll, useMenuStore };

package/dist/Menu/index.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { StoreApi } from 'zustand';
+
+interface MenuStore {
+    value: string;
+    setValue: (value: string) => void;
+}
+type MenuStoreApi = StoreApi<MenuStore>;
+declare const useMenuStore: (externalStore?: MenuStoreApi) => MenuStoreApi;
+interface MenuProps extends HTMLAttributes<HTMLUListElement> {
+    children: ReactNode;
+    defaultValue: string;
+    value?: string;
+    variant?: 'menu' | 'menu2' | 'breadcrumb';
+    onValueChange?: (value: string) => void;
+}
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLUListElement>>;
+interface MenuItemProps extends HTMLAttributes<HTMLLIElement> {
+    value: string;
+    disabled?: boolean;
+    store?: MenuStoreApi;
+    variant?: 'menu' | 'menu2' | 'breadcrumb';
+}
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLLIElement>>;
+declare const MenuItemIcon: ({ className, icon, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    icon: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const MenuSeparator: react.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
+declare const internalScroll: (container: HTMLUListElement | null, direction: "left" | "right") => void;
+declare const internalCheckScroll: (container: HTMLUListElement | null, setShowLeftArrow: (v: boolean) => void, setShowRightArrow: (v: boolean) => void) => void;
+interface MenuOverflowProps extends HTMLAttributes<HTMLUListElement> {
+    children: ReactNode;
+    defaultValue: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+declare const MenuOverflow: ({ children, className, defaultValue, value, onValueChange, ...props }: MenuOverflowProps) => react_jsx_runtime.JSX.Element;
+
+export { Menu, MenuItem, MenuItemIcon, MenuOverflow, MenuSeparator, Menu as default, internalCheckScroll, internalScroll, useMenuStore };

package/dist/Menu/index.js

@@ -0,0 +1,307 @@
+"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/Menu/Menu.tsx
+var Menu_exports = {};
+__export(Menu_exports, {
+  Menu: () => Menu,
+  MenuItem: () => MenuItem,
+  MenuItemIcon: () => MenuItemIcon,
+  MenuOverflow: () => MenuOverflow,
+  MenuSeparator: () => MenuSeparator,
+  default: () => Menu_default,
+  internalCheckScroll: () => internalCheckScroll,
+  internalScroll: () => internalScroll,
+  useMenuStore: () => useMenuStore
+});
+module.exports = __toCommonJS(Menu_exports);
+var import_zustand = require("zustand");
+var import_react = require("react");
+var import_phosphor_react = require("phosphor-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var createMenuStore = () => (0, import_zustand.create)((set) => ({
+  value: "",
+  setValue: (value) => set({ value })
+}));
+var useMenuStore = (externalStore) => {
+  if (!externalStore) throw new Error("MenuItem must be inside Menu");
+  return externalStore;
+};
+var VARIANT_CLASSES = {
+  menu: "bg-background shadow-soft-shadow-1",
+  menu2: "overflow-x-auto scroll-smooth",
+  breadcrumb: ""
+};
+var Menu = (0, import_react.forwardRef)(
+  ({
+    className,
+    children,
+    defaultValue,
+    value: propValue,
+    variant = "menu",
+    onValueChange,
+    ...props
+  }, ref) => {
+    const storeRef = (0, import_react.useRef)(null);
+    storeRef.current ??= createMenuStore();
+    const store = storeRef.current;
+    const { setValue, value } = (0, import_zustand.useStore)(store, (s) => s);
+    (0, import_react.useEffect)(() => {
+      setValue(propValue ?? defaultValue);
+    }, [defaultValue, propValue, setValue]);
+    (0, import_react.useEffect)(() => {
+      onValueChange?.(value);
+    }, [value, onValueChange]);
+    const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
+    const variantClasses = VARIANT_CLASSES[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        ...props,
+        children: injectStore(children, store)
+      }
+    );
+  }
+);
+Menu.displayName = "Menu";
+var MenuItem = (0, import_react.forwardRef)(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    variant = "menu",
+    ...props
+  }, ref) => {
+    const store = useMenuStore(externalStore);
+    const { value: selectedValue, setValue } = (0, import_zustand.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_runtime.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_runtime.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_runtime.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_runtime.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 MenuItemIcon = ({
+  className,
+  icon,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "span",
+  {
+    className: `
+      bg-background-500 w-[21px] h-[21px] flex items-center justify-center
+      [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm ${className ?? ""}
+    `,
+    ...props,
+    children: icon
+  }
+);
+var MenuSeparator = (0, import_react.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "li",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
+      ...props,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretRight, {})
+    }
+  )
+);
+MenuSeparator.displayName = "MenuSeparator";
+var internalScroll = (container, direction) => {
+  if (!container) return;
+  container.scrollBy({
+    left: direction === "left" ? -150 : 150,
+    behavior: "smooth"
+  });
+};
+var internalCheckScroll = (container, setShowLeftArrow, setShowRightArrow) => {
+  if (!container) return;
+  const { scrollLeft, scrollWidth, clientWidth } = container;
+  setShowLeftArrow(scrollLeft > 0);
+  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);
+};
+var MenuOverflow = ({
+  children,
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  ...props
+}) => {
+  const containerRef = (0, import_react.useRef)(null);
+  const [showLeftArrow, setShowLeftArrow] = (0, import_react.useState)(false);
+  const [showRightArrow, setShowRightArrow] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const checkScroll = () => internalCheckScroll(
+      containerRef.current,
+      setShowLeftArrow,
+      setShowRightArrow
+    );
+    checkScroll();
+    const container = containerRef.current;
+    container?.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    return () => {
+      container?.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-testid": "menu-overflow-wrapper",
+      className: `relative w-full overflow-hidden ${className ?? ""}`,
+      children: [
+        showLeftArrow && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: () => internalScroll(containerRef.current, "left"),
+            className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md",
+            "data-testid": "scroll-left-button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretLeft, { size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Scroll left" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Menu,
+          {
+            ref: containerRef,
+            variant: "menu2",
+            defaultValue,
+            onValueChange,
+            value,
+            ...props,
+            children
+          }
+        ),
+        showRightArrow && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: () => internalScroll(containerRef.current, "right"),
+            className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md",
+            "data-testid": "scroll-right-button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.CaretRight, { size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Scroll right" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var injectStore = (children, store) => import_react.Children.map(children, (child) => {
+  if (!(0, import_react.isValidElement)(child)) return child;
+  const typedChild = child;
+  const shouldInject = typedChild.type === MenuItem;
+  return (0, import_react.cloneElement)(typedChild, {
+    ...shouldInject ? { store } : {},
+    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
+  });
+});
+var Menu_default = Menu;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Menu,
+  MenuItem,
+  MenuItemIcon,
+  MenuOverflow,
+  MenuSeparator,
+  internalCheckScroll,
+  internalScroll,
+  useMenuStore
+});
+//# sourceMappingURL=index.js.map

package/dist/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n  useState,\n} from 'react';\nimport { CaretLeft, CaretRight } from 'phosphor-react';\n\ninterface MenuStore {\n  value: string;\n  setValue: (value: string) => void;\n}\n\ntype MenuStoreApi = StoreApi<MenuStore>;\n\nconst createMenuStore = (): MenuStoreApi =>\n  create<MenuStore>((set) => ({\n    value: '',\n    setValue: (value) => set({ value }),\n  }));\n\nexport const useMenuStore = (externalStore?: MenuStoreApi) => {\n  if (!externalStore) throw new Error('MenuItem must be inside Menu');\n  return externalStore;\n};\n\ninterface MenuProps extends HTMLAttributes<HTMLUListElement> {\n  children: ReactNode;\n  defaultValue: string;\n  value?: string;\n  variant?: 'menu' | 'menu2' | 'breadcrumb';\n  onValueChange?: (value: string) => void;\n}\n\nconst VARIANT_CLASSES = {\n  menu: 'bg-background shadow-soft-shadow-1',\n  menu2: 'overflow-x-auto scroll-smooth',\n  breadcrumb: '',\n};\n\nconst Menu = forwardRef<HTMLUListElement, MenuProps>(\n  (\n    {\n      className,\n      children,\n      defaultValue,\n      value: propValue,\n      variant = 'menu',\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    const storeRef = useRef<MenuStoreApi>(null);\n    storeRef.current ??= createMenuStore();\n    const store = storeRef.current;\n    const { setValue, value } = useStore(store, (s) => s);\n\n    useEffect(() => {\n      setValue(propValue ?? defaultValue);\n    }, [defaultValue, propValue, setValue]);\n\n    useEffect(() => {\n      onValueChange?.(value);\n    }, [value, onValueChange]);\n\n    const baseClasses = 'w-full flex flex-row items-center gap-2 py-2 px-6';\n\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <ul\n        ref={ref}\n        className={`\n          ${baseClasses}\n          ${variantClasses}\n          ${className ?? ''}\n        `}\n        style={\n          variant === 'menu2'\n            ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n            : undefined\n        }\n        {...props}\n      >\n        {injectStore(children, store)}\n      </ul>\n    );\n  }\n);\nMenu.displayName = 'Menu';\n\ninterface MenuItemProps extends HTMLAttributes<HTMLLIElement> {\n  value: string;\n  disabled?: boolean;\n  store?: MenuStoreApi;\n  variant?: 'menu' | 'menu2' | 'breadcrumb';\n}\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      variant = 'menu',\n      ...props\n    },\n    ref\n  ) => {\n    const store = useMenuStore(externalStore);\n    const { value: selectedValue, setValue } = useStore(store, (s) => s);\n\n    const handleClick = (\n      e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n    ) => {\n      if (!disabled) setValue(value);\n      props.onClick?.(e as MouseEvent<HTMLLIElement>);\n    };\n\n    const commonProps = {\n      role: 'menuitem',\n      'aria-disabled': disabled,\n      ref,\n      onClick: handleClick,\n      onKeyDown: (e: KeyboardEvent<HTMLLIElement>) => {\n        if (['Enter', ' '].includes(e.key)) handleClick(e);\n      },\n      tabIndex: disabled ? -1 : 0,\n      ...props,\n    };\n\n    const variants: Record<string, ReactNode> = {\n      menu: (\n        <li\n          data-variant=\"menu\"\n          className={`\n            w-full flex flex-col gap-0.5 items-center py-1 px-2 rounded-sm font-medium text-xs\n            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text\n            focus:outline-none focus:border-2-indicator-info focus:border-2\n            ${selectedValue === value ? 'bg-primary-50 text-primary-950' : 'text-text-950'}\n            ${className ?? ''}\n          `}\n          {...commonProps}\n        >\n          {children}\n        </li>\n      ),\n      menu2: (\n        <li\n          data-variant=\"menu2\"\n          className={`\n            flex flex-row items-center p-4 gap-2 border-b-2 border-transparent text-text-950 text-sx font-bold cursor-pointer\n            ${selectedValue === value ? 'border-b-primary-950' : ''}\n          `}\n          {...commonProps}\n        >\n          {children}\n        </li>\n      ),\n      breadcrumb: (\n        <li\n          data-variant=\"breadcrumb\"\n          className={`\n            p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs\n            focus:outline-none focus:border-indicator-info focus:border-2\n            ${selectedValue === value ? 'text-primary-950' : 'text-text-600'}\n            ${className ?? ''}\n          `}\n          {...commonProps}\n        >\n          <span\n            className={`\n              border-b border-text-600 hover:border-primary-600 text-inherit\n              ${selectedValue === value ? 'border-b-primary-950' : 'border-b-primary-600'}\n            `}\n          >\n            {children}\n          </span>\n        </li>\n      ),\n    };\n\n    return variants[variant] ?? variants['menu'];\n  }\n);\nMenuItem.displayName = 'MenuItem';\n\nconst MenuItemIcon = ({\n  className,\n  icon,\n  ...props\n}: HTMLAttributes<HTMLSpanElement> & { icon: ReactNode }) => (\n  <span\n    className={`\n      bg-background-500 w-[21px] h-[21px] flex items-center justify-center\n      [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm ${className ?? ''}\n    `}\n    {...props}\n  >\n    {icon}\n  </span>\n);\n\nconst MenuSeparator = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(\n  ({ className, children, ...props }, ref) => (\n    <li\n      ref={ref}\n      aria-hidden=\"true\"\n      className={`[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ''}`}\n      {...props}\n    >\n      {children ?? <CaretRight />}\n    </li>\n  )\n);\nMenuSeparator.displayName = 'MenuSeparator';\n\nexport const internalScroll = (\n  container: HTMLUListElement | null,\n  direction: 'left' | 'right'\n) => {\n  if (!container) return;\n  container.scrollBy({\n    left: direction === 'left' ? -150 : 150,\n    behavior: 'smooth',\n  });\n};\n\nexport const internalCheckScroll = (\n  container: HTMLUListElement | null,\n  setShowLeftArrow: (v: boolean) => void,\n  setShowRightArrow: (v: boolean) => void\n) => {\n  if (!container) return;\n  const { scrollLeft, scrollWidth, clientWidth } = container;\n  setShowLeftArrow(scrollLeft > 0);\n  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);\n};\n\ninterface MenuOverflowProps extends HTMLAttributes<HTMLUListElement> {\n  children: ReactNode;\n  defaultValue: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst MenuOverflow = ({\n  children,\n  className,\n  defaultValue,\n  value,\n  onValueChange,\n  ...props\n}: MenuOverflowProps) => {\n  const containerRef = useRef<HTMLUListElement>(null);\n  const [showLeftArrow, setShowLeftArrow] = useState(false);\n  const [showRightArrow, setShowRightArrow] = useState(false);\n\n  useEffect(() => {\n    const checkScroll = () =>\n      internalCheckScroll(\n        containerRef.current,\n        setShowLeftArrow,\n        setShowRightArrow\n      );\n    checkScroll();\n    const container = containerRef.current;\n    container?.addEventListener('scroll', checkScroll);\n    window.addEventListener('resize', checkScroll);\n    return () => {\n      container?.removeEventListener('scroll', checkScroll);\n      window.removeEventListener('resize', checkScroll);\n    };\n  }, []);\n\n  return (\n    <div\n      data-testid=\"menu-overflow-wrapper\"\n      className={`relative w-full overflow-hidden ${className ?? ''}`}\n    >\n      {showLeftArrow && (\n        <button\n          onClick={() => internalScroll(containerRef.current, 'left')}\n          className=\"absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md\"\n          data-testid=\"scroll-left-button\"\n        >\n          <CaretLeft size={16} />\n          <span className=\"sr-only\">Scroll left</span>\n        </button>\n      )}\n\n      <Menu\n        ref={containerRef}\n        variant=\"menu2\"\n        defaultValue={defaultValue}\n        onValueChange={onValueChange}\n        value={value}\n        {...props}\n      >\n        {children}\n      </Menu>\n\n      {showRightArrow && (\n        <button\n          onClick={() => internalScroll(containerRef.current, 'right')}\n          className=\"absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md\"\n          data-testid=\"scroll-right-button\"\n        >\n          <CaretRight size={16} />\n          <span className=\"sr-only\">Scroll right</span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nconst injectStore = (children: ReactNode, store: MenuStoreApi): ReactNode =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n    const typedChild = child as ReactElement<any>;\n    const shouldInject = typedChild.type === MenuItem;\n    return cloneElement(typedChild, {\n      ...(shouldInject ? { store } : {}),\n      ...(typedChild.props.children\n        ? { children: injectStore(typedChild.props.children, store) }\n        : {}),\n    });\n  });\n\nexport default Menu;\nexport { Menu, MenuItem, MenuSeparator, MenuOverflow, MenuItemIcon };\n"],"mappings":"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","names":[]}