analytica-frontend-lib 1.1.4 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -44,31 +44,5 @@ interface MenuOverflowProps extends HTMLAttributes<HTMLDivElement> {
44
44
  onValueChange?: (value: string) => void;
45
45
  }
46
46
  declare const MenuOverflow: ({ children, className, defaultValue, value, onValueChange, ...props }: MenuOverflowProps) => react_jsx_runtime.JSX.Element;
47
- /**
48
- * Props for the Breadcrumb component
49
- */
50
- interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
51
- /**
52
- * Current page name to display in breadcrumb
53
- */
54
- currentPage: string;
55
- /**
56
- * Parent page name to display as first breadcrumb item
57
- */
58
- parentPageName: string;
59
- /**
60
- * Callback function to handle navigation back to parent page
61
- */
62
- onBackClick: () => void;
63
- }
64
- /**
65
- * Breadcrumb navigation component for displaying hierarchical page structure
66
- * @param currentPage - Current page name to display
67
- * @param parentPageName - Parent page name for navigation
68
- * @param onBackClick - Callback when clicking parent page
69
- * @param className - Optional CSS classes to apply
70
- * @param props - Additional HTML div attributes
71
- */
72
- declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLDivElement>>;
73
47
 
74
- export { Breadcrumb, Menu, MenuContent, MenuItem, MenuItemIcon, MenuOverflow, Menu as default, internalCheckScroll, internalScroll, useMenuStore };
48
+ export { Menu, MenuContent, MenuItem, MenuItemIcon, MenuOverflow, Menu as default, internalCheckScroll, internalScroll, useMenuStore };
@@ -44,31 +44,5 @@ interface MenuOverflowProps extends HTMLAttributes<HTMLDivElement> {
44
44
  onValueChange?: (value: string) => void;
45
45
  }
46
46
  declare const MenuOverflow: ({ children, className, defaultValue, value, onValueChange, ...props }: MenuOverflowProps) => react_jsx_runtime.JSX.Element;
47
- /**
48
- * Props for the Breadcrumb component
49
- */
50
- interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
51
- /**
52
- * Current page name to display in breadcrumb
53
- */
54
- currentPage: string;
55
- /**
56
- * Parent page name to display as first breadcrumb item
57
- */
58
- parentPageName: string;
59
- /**
60
- * Callback function to handle navigation back to parent page
61
- */
62
- onBackClick: () => void;
63
- }
64
- /**
65
- * Breadcrumb navigation component for displaying hierarchical page structure
66
- * @param currentPage - Current page name to display
67
- * @param parentPageName - Parent page name for navigation
68
- * @param onBackClick - Callback when clicking parent page
69
- * @param className - Optional CSS classes to apply
70
- * @param props - Additional HTML div attributes
71
- */
72
- declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLDivElement>>;
73
47
 
74
- export { Breadcrumb, Menu, MenuContent, MenuItem, MenuItemIcon, MenuOverflow, Menu as default, internalCheckScroll, internalScroll, useMenuStore };
48
+ export { Menu, MenuContent, MenuItem, MenuItemIcon, MenuOverflow, Menu as default, internalCheckScroll, internalScroll, useMenuStore };
@@ -20,7 +20,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/components/Menu/Menu.tsx
21
21
  var Menu_exports = {};
22
22
  __export(Menu_exports, {
23
- Breadcrumb: () => Breadcrumb,
24
23
  Menu: () => Menu,
25
24
  MenuContent: () => MenuContent,
26
25
  MenuItem: () => MenuItem,
@@ -339,51 +338,9 @@ var injectStore = (children, store) => import_react.Children.map(children, (chil
339
338
  ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
340
339
  });
341
340
  });
342
- var Breadcrumb = (0, import_react.forwardRef)(
343
- ({ currentPage, parentPageName, onBackClick, className, ...props }, ref) => {
344
- const handleBackToParent = (0, import_react.useCallback)(() => {
345
- onBackClick();
346
- }, [onBackClick]);
347
- const breadcrumbClassName = `py-4 ${typeof className === "string" ? className : ""}`;
348
- const { defaultValue: _unused, ...menuProps } = props;
349
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
350
- Menu,
351
- {
352
- ref,
353
- variant: "breadcrumb",
354
- defaultValue: currentPage.toLowerCase(),
355
- className: breadcrumbClassName,
356
- ...menuProps,
357
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenuContent, { variant: "breadcrumb", children: [
358
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
359
- MenuItem,
360
- {
361
- variant: "breadcrumb",
362
- value: parentPageName.toLowerCase(),
363
- onClick: handleBackToParent,
364
- separator: true,
365
- children: parentPageName
366
- }
367
- ),
368
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
369
- MenuItem,
370
- {
371
- variant: "breadcrumb",
372
- value: currentPage.toLowerCase(),
373
- disabled: true,
374
- children: currentPage
375
- }
376
- )
377
- ] })
378
- }
379
- );
380
- }
381
- );
382
- Breadcrumb.displayName = "Breadcrumb";
383
341
  var Menu_default = Menu;
384
342
  // Annotate the CommonJS export names for ESM import in node:
385
343
  0 && (module.exports = {
386
- Breadcrumb,
387
344
  Menu,
388
345
  MenuContent,
389
346
  MenuItem,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/Menu/Menu.tsx","../../src/utils/utils.ts"],"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 useCallback,\n} from 'react';\nimport { CaretLeft, CaretRight } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\ntype MenuVariant = 'menu' | 'menu2' | 'breadcrumb';\n\ninterface MenuStore {\n value: string;\n setValue: (value: string) => void;\n onValueChange?: (value: string) => void;\n}\n\ntype MenuStoreApi = StoreApi<MenuStore>;\n\nconst createMenuStore = (\n onValueChange?: (value: string) => void\n): MenuStoreApi =>\n create<MenuStore>((set) => ({\n value: '',\n setValue: (value) => {\n set({ value });\n onValueChange?.(value);\n },\n onValueChange,\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<HTMLDivElement> {\n children: ReactNode;\n defaultValue: string;\n value?: string;\n variant?: MenuVariant;\n onValueChange?: (value: string) => void;\n}\n\nconst VARIANT_CLASSES = {\n menu: 'bg-background shadow-soft-shadow-1 px-6',\n menu2: '',\n breadcrumb: 'bg-transparent shadow-none !px-0 !-ml-2',\n};\n\nconst Menu = forwardRef<HTMLDivElement, 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(onValueChange);\n const store = storeRef.current;\n const { setValue } = useStore(store, (s) => s);\n\n useEffect(() => {\n setValue(propValue ?? defaultValue);\n }, [defaultValue, propValue, setValue]);\n\n const baseClasses = 'w-full py-2 flex flex-row items-center justify-center';\n const variantClasses = VARIANT_CLASSES[variant];\n\n return (\n <div\n ref={ref}\n className={`\n ${baseClasses}\n ${variantClasses}\n ${className ?? ''}\n `}\n {...props}\n >\n {injectStore(children, store)}\n </div>\n );\n }\n);\nMenu.displayName = 'Menu';\n\ninterface MenuContentProps extends HTMLAttributes<HTMLUListElement> {\n children: ReactNode;\n variant?: MenuVariant;\n}\n\nconst MenuContent = forwardRef<HTMLUListElement, MenuContentProps>(\n ({ className, children, variant = 'menu', ...props }, ref) => {\n const baseClasses = 'w-full flex flex-row items-center gap-2';\n\n const variantClasses =\n variant === 'menu2' ? 'overflow-x-auto scroll-smooth' : '';\n\n return (\n <ul\n ref={ref}\n className={`\n ${baseClasses}\n ${variantClasses}\n ${variant == 'breadcrumb' ? 'flex-wrap' : ''}\n ${className ?? ''}\n `}\n style={\n variant === 'menu2'\n ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n : undefined\n }\n {...props}\n >\n {children}\n </ul>\n );\n }\n);\nMenuContent.displayName = 'MenuContent';\n\ninterface MenuItemProps extends HTMLAttributes<HTMLLIElement> {\n value: string;\n disabled?: boolean;\n store?: MenuStoreApi;\n variant?: MenuVariant;\n separator?: boolean;\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 separator = false,\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) {\n setValue(value);\n }\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 onMouseDown: (e: MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n },\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 items-center justify-center gap-0.5 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-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 w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg\n focus:outline-none focus:border-indicator-info focus:border-2\n ${selectedValue === value ? '' : 'pb-4'}\n `}\n {...commonProps}\n >\n <span\n className={cn(\n 'flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold',\n className\n )}\n >\n {children}\n </span>\n {selectedValue === value && (\n <div className=\"h-1 w-full bg-primary-950 rounded-lg\" />\n )}\n </li>\n ),\n breadcrumb: (\n <li\n data-variant=\"breadcrumb\"\n className={`\n flex flex-row gap-2 items-center w-fit 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-text-950' : 'text-text-600'}\n ${className ?? ''}\n `}\n {...commonProps}\n >\n <span\n className={cn(\n 'border-b border-text-600 hover:border-primary-600 text-inherit text-xs',\n selectedValue === value\n ? 'border-b-0 font-bold'\n : 'border-b-primary-200'\n )}\n >\n {children}\n </span>\n\n {separator && (\n <CaretRight\n size={16}\n className=\"text-text-600\"\n data-testid=\"separator\"\n />\n )}\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={cn(\n 'bg-background-500 w-[21px] h-[21px] flex items-center justify-center [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm',\n className\n )}\n {...props}\n >\n {icon}\n </span>\n);\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<HTMLDivElement> {\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={cn('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 cursor-pointer\"\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 defaultValue={defaultValue}\n onValueChange={onValueChange}\n value={value}\n variant=\"menu2\"\n {...props}\n >\n <MenuContent ref={containerRef} variant=\"menu2\">\n {children}\n </MenuContent>\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 cursor-pointer\"\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\n/**\n * Props for the Breadcrumb component\n */\ninterface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Current page name to display in breadcrumb\n */\n currentPage: string;\n /**\n * Parent page name to display as first breadcrumb item\n */\n parentPageName: string;\n /**\n * Callback function to handle navigation back to parent page\n */\n onBackClick: () => void;\n}\n\n/**\n * Breadcrumb navigation component for displaying hierarchical page structure\n * @param currentPage - Current page name to display\n * @param parentPageName - Parent page name for navigation\n * @param onBackClick - Callback when clicking parent page\n * @param className - Optional CSS classes to apply\n * @param props - Additional HTML div attributes\n */\nconst Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(\n ({ currentPage, parentPageName, onBackClick, className, ...props }, ref) => {\n const handleBackToParent = useCallback(() => {\n onBackClick();\n }, [onBackClick]);\n\n const breadcrumbClassName = `py-4 ${\n typeof className === 'string' ? className : ''\n }`;\n\n const { defaultValue: _unused, ...menuProps } =\n props as HTMLAttributes<HTMLDivElement> & { defaultValue?: string };\n\n return (\n <Menu\n ref={ref}\n variant=\"breadcrumb\"\n defaultValue={currentPage.toLowerCase()}\n className={breadcrumbClassName}\n {...menuProps}\n >\n <MenuContent variant=\"breadcrumb\">\n <MenuItem\n variant=\"breadcrumb\"\n value={parentPageName.toLowerCase()}\n onClick={handleBackToParent}\n separator={true}\n >\n {parentPageName}\n </MenuItem>\n <MenuItem\n variant=\"breadcrumb\"\n value={currentPage.toLowerCase()}\n disabled\n >\n {currentPage}\n </MenuItem>\n </MenuContent>\n </Menu>\n );\n }\n);\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Menu;\nexport { Menu, MenuContent, MenuItem, MenuOverflow, MenuItemIcon, Breadcrumb };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/Menu/Menu.tsx","../../src/utils/utils.ts"],"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';\nimport { cn } from '../../utils/utils';\n\ntype MenuVariant = 'menu' | 'menu2' | 'breadcrumb';\n\ninterface MenuStore {\n value: string;\n setValue: (value: string) => void;\n onValueChange?: (value: string) => void;\n}\n\ntype MenuStoreApi = StoreApi<MenuStore>;\n\nconst createMenuStore = (\n onValueChange?: (value: string) => void\n): MenuStoreApi =>\n create<MenuStore>((set) => ({\n value: '',\n setValue: (value) => {\n set({ value });\n onValueChange?.(value);\n },\n onValueChange,\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<HTMLDivElement> {\n children: ReactNode;\n defaultValue: string;\n value?: string;\n variant?: MenuVariant;\n onValueChange?: (value: string) => void;\n}\n\nconst VARIANT_CLASSES = {\n menu: 'bg-background shadow-soft-shadow-1 px-6',\n menu2: '',\n breadcrumb: 'bg-transparent shadow-none !px-0 !-ml-2',\n};\n\nconst Menu = forwardRef<HTMLDivElement, 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(onValueChange);\n const store = storeRef.current;\n const { setValue } = useStore(store, (s) => s);\n\n useEffect(() => {\n setValue(propValue ?? defaultValue);\n }, [defaultValue, propValue, setValue]);\n\n const baseClasses = 'w-full py-2 flex flex-row items-center justify-center';\n const variantClasses = VARIANT_CLASSES[variant];\n\n return (\n <div\n ref={ref}\n className={`\n ${baseClasses}\n ${variantClasses}\n ${className ?? ''}\n `}\n {...props}\n >\n {injectStore(children, store)}\n </div>\n );\n }\n);\nMenu.displayName = 'Menu';\n\ninterface MenuContentProps extends HTMLAttributes<HTMLUListElement> {\n children: ReactNode;\n variant?: MenuVariant;\n}\n\nconst MenuContent = forwardRef<HTMLUListElement, MenuContentProps>(\n ({ className, children, variant = 'menu', ...props }, ref) => {\n const baseClasses = 'w-full flex flex-row items-center gap-2';\n\n const variantClasses =\n variant === 'menu2' ? 'overflow-x-auto scroll-smooth' : '';\n\n return (\n <ul\n ref={ref}\n className={`\n ${baseClasses}\n ${variantClasses}\n ${variant == 'breadcrumb' ? 'flex-wrap' : ''}\n ${className ?? ''}\n `}\n style={\n variant === 'menu2'\n ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n : undefined\n }\n {...props}\n >\n {children}\n </ul>\n );\n }\n);\nMenuContent.displayName = 'MenuContent';\n\ninterface MenuItemProps extends HTMLAttributes<HTMLLIElement> {\n value: string;\n disabled?: boolean;\n store?: MenuStoreApi;\n variant?: MenuVariant;\n separator?: boolean;\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 separator = false,\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) {\n setValue(value);\n }\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 onMouseDown: (e: MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n },\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 items-center justify-center gap-0.5 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-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 w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg\n focus:outline-none focus:border-indicator-info focus:border-2\n ${selectedValue === value ? '' : 'pb-4'}\n `}\n {...commonProps}\n >\n <span\n className={cn(\n 'flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold',\n className\n )}\n >\n {children}\n </span>\n {selectedValue === value && (\n <div className=\"h-1 w-full bg-primary-950 rounded-lg\" />\n )}\n </li>\n ),\n breadcrumb: (\n <li\n data-variant=\"breadcrumb\"\n className={`\n flex flex-row gap-2 items-center w-fit 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-text-950' : 'text-text-600'}\n ${className ?? ''}\n `}\n {...commonProps}\n >\n <span\n className={cn(\n 'border-b border-text-600 hover:border-primary-600 text-inherit text-xs',\n selectedValue === value\n ? 'border-b-0 font-bold'\n : 'border-b-primary-200'\n )}\n >\n {children}\n </span>\n\n {separator && (\n <CaretRight\n size={16}\n className=\"text-text-600\"\n data-testid=\"separator\"\n />\n )}\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={cn(\n 'bg-background-500 w-[21px] h-[21px] flex items-center justify-center [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm',\n className\n )}\n {...props}\n >\n {icon}\n </span>\n);\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<HTMLDivElement> {\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={cn('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 cursor-pointer\"\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 defaultValue={defaultValue}\n onValueChange={onValueChange}\n value={value}\n variant=\"menu2\"\n {...props}\n >\n <MenuContent ref={containerRef} variant=\"menu2\">\n {children}\n </MenuContent>\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 cursor-pointer\"\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, MenuContent, MenuItem, MenuOverflow, MenuItemIcon };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}
@@ -7,8 +7,7 @@ import {
7
7
  isValidElement,
8
8
  Children,
9
9
  cloneElement,
10
- useState,
11
- useCallback
10
+ useState
12
11
  } from "react";
13
12
  import { CaretLeft, CaretRight } from "phosphor-react";
14
13
 
@@ -315,50 +314,8 @@ var injectStore = (children, store) => Children.map(children, (child) => {
315
314
  ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
316
315
  });
317
316
  });
318
- var Breadcrumb = forwardRef(
319
- ({ currentPage, parentPageName, onBackClick, className, ...props }, ref) => {
320
- const handleBackToParent = useCallback(() => {
321
- onBackClick();
322
- }, [onBackClick]);
323
- const breadcrumbClassName = `py-4 ${typeof className === "string" ? className : ""}`;
324
- const { defaultValue: _unused, ...menuProps } = props;
325
- return /* @__PURE__ */ jsx(
326
- Menu,
327
- {
328
- ref,
329
- variant: "breadcrumb",
330
- defaultValue: currentPage.toLowerCase(),
331
- className: breadcrumbClassName,
332
- ...menuProps,
333
- children: /* @__PURE__ */ jsxs(MenuContent, { variant: "breadcrumb", children: [
334
- /* @__PURE__ */ jsx(
335
- MenuItem,
336
- {
337
- variant: "breadcrumb",
338
- value: parentPageName.toLowerCase(),
339
- onClick: handleBackToParent,
340
- separator: true,
341
- children: parentPageName
342
- }
343
- ),
344
- /* @__PURE__ */ jsx(
345
- MenuItem,
346
- {
347
- variant: "breadcrumb",
348
- value: currentPage.toLowerCase(),
349
- disabled: true,
350
- children: currentPage
351
- }
352
- )
353
- ] })
354
- }
355
- );
356
- }
357
- );
358
- Breadcrumb.displayName = "Breadcrumb";
359
317
  var Menu_default = Menu;
360
318
  export {
361
- Breadcrumb,
362
319
  Menu,
363
320
  MenuContent,
364
321
  MenuItem,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/Menu/Menu.tsx","../../src/utils/utils.ts"],"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 useCallback,\n} from 'react';\nimport { CaretLeft, CaretRight } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\ntype MenuVariant = 'menu' | 'menu2' | 'breadcrumb';\n\ninterface MenuStore {\n value: string;\n setValue: (value: string) => void;\n onValueChange?: (value: string) => void;\n}\n\ntype MenuStoreApi = StoreApi<MenuStore>;\n\nconst createMenuStore = (\n onValueChange?: (value: string) => void\n): MenuStoreApi =>\n create<MenuStore>((set) => ({\n value: '',\n setValue: (value) => {\n set({ value });\n onValueChange?.(value);\n },\n onValueChange,\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<HTMLDivElement> {\n children: ReactNode;\n defaultValue: string;\n value?: string;\n variant?: MenuVariant;\n onValueChange?: (value: string) => void;\n}\n\nconst VARIANT_CLASSES = {\n menu: 'bg-background shadow-soft-shadow-1 px-6',\n menu2: '',\n breadcrumb: 'bg-transparent shadow-none !px-0 !-ml-2',\n};\n\nconst Menu = forwardRef<HTMLDivElement, 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(onValueChange);\n const store = storeRef.current;\n const { setValue } = useStore(store, (s) => s);\n\n useEffect(() => {\n setValue(propValue ?? defaultValue);\n }, [defaultValue, propValue, setValue]);\n\n const baseClasses = 'w-full py-2 flex flex-row items-center justify-center';\n const variantClasses = VARIANT_CLASSES[variant];\n\n return (\n <div\n ref={ref}\n className={`\n ${baseClasses}\n ${variantClasses}\n ${className ?? ''}\n `}\n {...props}\n >\n {injectStore(children, store)}\n </div>\n );\n }\n);\nMenu.displayName = 'Menu';\n\ninterface MenuContentProps extends HTMLAttributes<HTMLUListElement> {\n children: ReactNode;\n variant?: MenuVariant;\n}\n\nconst MenuContent = forwardRef<HTMLUListElement, MenuContentProps>(\n ({ className, children, variant = 'menu', ...props }, ref) => {\n const baseClasses = 'w-full flex flex-row items-center gap-2';\n\n const variantClasses =\n variant === 'menu2' ? 'overflow-x-auto scroll-smooth' : '';\n\n return (\n <ul\n ref={ref}\n className={`\n ${baseClasses}\n ${variantClasses}\n ${variant == 'breadcrumb' ? 'flex-wrap' : ''}\n ${className ?? ''}\n `}\n style={\n variant === 'menu2'\n ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n : undefined\n }\n {...props}\n >\n {children}\n </ul>\n );\n }\n);\nMenuContent.displayName = 'MenuContent';\n\ninterface MenuItemProps extends HTMLAttributes<HTMLLIElement> {\n value: string;\n disabled?: boolean;\n store?: MenuStoreApi;\n variant?: MenuVariant;\n separator?: boolean;\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 separator = false,\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) {\n setValue(value);\n }\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 onMouseDown: (e: MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n },\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 items-center justify-center gap-0.5 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-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 w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg\n focus:outline-none focus:border-indicator-info focus:border-2\n ${selectedValue === value ? '' : 'pb-4'}\n `}\n {...commonProps}\n >\n <span\n className={cn(\n 'flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold',\n className\n )}\n >\n {children}\n </span>\n {selectedValue === value && (\n <div className=\"h-1 w-full bg-primary-950 rounded-lg\" />\n )}\n </li>\n ),\n breadcrumb: (\n <li\n data-variant=\"breadcrumb\"\n className={`\n flex flex-row gap-2 items-center w-fit 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-text-950' : 'text-text-600'}\n ${className ?? ''}\n `}\n {...commonProps}\n >\n <span\n className={cn(\n 'border-b border-text-600 hover:border-primary-600 text-inherit text-xs',\n selectedValue === value\n ? 'border-b-0 font-bold'\n : 'border-b-primary-200'\n )}\n >\n {children}\n </span>\n\n {separator && (\n <CaretRight\n size={16}\n className=\"text-text-600\"\n data-testid=\"separator\"\n />\n )}\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={cn(\n 'bg-background-500 w-[21px] h-[21px] flex items-center justify-center [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm',\n className\n )}\n {...props}\n >\n {icon}\n </span>\n);\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<HTMLDivElement> {\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={cn('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 cursor-pointer\"\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 defaultValue={defaultValue}\n onValueChange={onValueChange}\n value={value}\n variant=\"menu2\"\n {...props}\n >\n <MenuContent ref={containerRef} variant=\"menu2\">\n {children}\n </MenuContent>\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 cursor-pointer\"\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\n/**\n * Props for the Breadcrumb component\n */\ninterface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Current page name to display in breadcrumb\n */\n currentPage: string;\n /**\n * Parent page name to display as first breadcrumb item\n */\n parentPageName: string;\n /**\n * Callback function to handle navigation back to parent page\n */\n onBackClick: () => void;\n}\n\n/**\n * Breadcrumb navigation component for displaying hierarchical page structure\n * @param currentPage - Current page name to display\n * @param parentPageName - Parent page name for navigation\n * @param onBackClick - Callback when clicking parent page\n * @param className - Optional CSS classes to apply\n * @param props - Additional HTML div attributes\n */\nconst Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(\n ({ currentPage, parentPageName, onBackClick, className, ...props }, ref) => {\n const handleBackToParent = useCallback(() => {\n onBackClick();\n }, [onBackClick]);\n\n const breadcrumbClassName = `py-4 ${\n typeof className === 'string' ? className : ''\n }`;\n\n const { defaultValue: _unused, ...menuProps } =\n props as HTMLAttributes<HTMLDivElement> & { defaultValue?: string };\n\n return (\n <Menu\n ref={ref}\n variant=\"breadcrumb\"\n defaultValue={currentPage.toLowerCase()}\n className={breadcrumbClassName}\n {...menuProps}\n >\n <MenuContent variant=\"breadcrumb\">\n <MenuItem\n variant=\"breadcrumb\"\n value={parentPageName.toLowerCase()}\n onClick={handleBackToParent}\n separator={true}\n >\n {parentPageName}\n </MenuItem>\n <MenuItem\n variant=\"breadcrumb\"\n value={currentPage.toLowerCase()}\n disabled\n >\n {currentPage}\n </MenuItem>\n </MenuContent>\n </Menu>\n );\n }\n);\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Menu;\nexport { Menu, MenuContent, MenuItem, MenuOverflow, MenuItemIcon, Breadcrumb };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/Menu/Menu.tsx","../../src/utils/utils.ts"],"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';\nimport { cn } from '../../utils/utils';\n\ntype MenuVariant = 'menu' | 'menu2' | 'breadcrumb';\n\ninterface MenuStore {\n value: string;\n setValue: (value: string) => void;\n onValueChange?: (value: string) => void;\n}\n\ntype MenuStoreApi = StoreApi<MenuStore>;\n\nconst createMenuStore = (\n onValueChange?: (value: string) => void\n): MenuStoreApi =>\n create<MenuStore>((set) => ({\n value: '',\n setValue: (value) => {\n set({ value });\n onValueChange?.(value);\n },\n onValueChange,\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<HTMLDivElement> {\n children: ReactNode;\n defaultValue: string;\n value?: string;\n variant?: MenuVariant;\n onValueChange?: (value: string) => void;\n}\n\nconst VARIANT_CLASSES = {\n menu: 'bg-background shadow-soft-shadow-1 px-6',\n menu2: '',\n breadcrumb: 'bg-transparent shadow-none !px-0 !-ml-2',\n};\n\nconst Menu = forwardRef<HTMLDivElement, 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(onValueChange);\n const store = storeRef.current;\n const { setValue } = useStore(store, (s) => s);\n\n useEffect(() => {\n setValue(propValue ?? defaultValue);\n }, [defaultValue, propValue, setValue]);\n\n const baseClasses = 'w-full py-2 flex flex-row items-center justify-center';\n const variantClasses = VARIANT_CLASSES[variant];\n\n return (\n <div\n ref={ref}\n className={`\n ${baseClasses}\n ${variantClasses}\n ${className ?? ''}\n `}\n {...props}\n >\n {injectStore(children, store)}\n </div>\n );\n }\n);\nMenu.displayName = 'Menu';\n\ninterface MenuContentProps extends HTMLAttributes<HTMLUListElement> {\n children: ReactNode;\n variant?: MenuVariant;\n}\n\nconst MenuContent = forwardRef<HTMLUListElement, MenuContentProps>(\n ({ className, children, variant = 'menu', ...props }, ref) => {\n const baseClasses = 'w-full flex flex-row items-center gap-2';\n\n const variantClasses =\n variant === 'menu2' ? 'overflow-x-auto scroll-smooth' : '';\n\n return (\n <ul\n ref={ref}\n className={`\n ${baseClasses}\n ${variantClasses}\n ${variant == 'breadcrumb' ? 'flex-wrap' : ''}\n ${className ?? ''}\n `}\n style={\n variant === 'menu2'\n ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n : undefined\n }\n {...props}\n >\n {children}\n </ul>\n );\n }\n);\nMenuContent.displayName = 'MenuContent';\n\ninterface MenuItemProps extends HTMLAttributes<HTMLLIElement> {\n value: string;\n disabled?: boolean;\n store?: MenuStoreApi;\n variant?: MenuVariant;\n separator?: boolean;\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 separator = false,\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) {\n setValue(value);\n }\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 onMouseDown: (e: MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n },\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 items-center justify-center gap-0.5 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-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 w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg\n focus:outline-none focus:border-indicator-info focus:border-2\n ${selectedValue === value ? '' : 'pb-4'}\n `}\n {...commonProps}\n >\n <span\n className={cn(\n 'flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold',\n className\n )}\n >\n {children}\n </span>\n {selectedValue === value && (\n <div className=\"h-1 w-full bg-primary-950 rounded-lg\" />\n )}\n </li>\n ),\n breadcrumb: (\n <li\n data-variant=\"breadcrumb\"\n className={`\n flex flex-row gap-2 items-center w-fit 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-text-950' : 'text-text-600'}\n ${className ?? ''}\n `}\n {...commonProps}\n >\n <span\n className={cn(\n 'border-b border-text-600 hover:border-primary-600 text-inherit text-xs',\n selectedValue === value\n ? 'border-b-0 font-bold'\n : 'border-b-primary-200'\n )}\n >\n {children}\n </span>\n\n {separator && (\n <CaretRight\n size={16}\n className=\"text-text-600\"\n data-testid=\"separator\"\n />\n )}\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={cn(\n 'bg-background-500 w-[21px] h-[21px] flex items-center justify-center [&>svg]:w-[17px] [&>svg]:h-[17px] rounded-sm',\n className\n )}\n {...props}\n >\n {icon}\n </span>\n);\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<HTMLDivElement> {\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={cn('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 cursor-pointer\"\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 defaultValue={defaultValue}\n onValueChange={onValueChange}\n value={value}\n variant=\"menu2\"\n {...props}\n >\n <MenuContent ref={containerRef} variant=\"menu2\">\n {children}\n </MenuContent>\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 cursor-pointer\"\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, MenuContent, MenuItem, MenuOverflow, MenuItemIcon };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAAS,QAAkB,gBAAgB;AAC3C;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EAKA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,kBAAkB;;;ACftC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADgFM,cAqHE,YArHF;AAzDN,IAAM,kBAAkB,CACtB,kBAEA,OAAkB,CAAC,SAAS;AAAA,EAC1B,OAAO;AAAA,EACP,UAAU,CAAC,UAAU;AACnB,QAAI,EAAE,MAAM,CAAC;AACb,oBAAgB,KAAK;AAAA,EACvB;AAAA,EACA;AACF,EAAE;AAEG,IAAM,eAAe,CAAC,kBAAiC;AAC5D,MAAI,CAAC,cAAe,OAAM,IAAI,MAAM,8BAA8B;AAClE,SAAO;AACT;AAUA,IAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AACd;AAEA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WAAW,OAAqB,IAAI;AAC1C,aAAS,YAAY,gBAAgB,aAAa;AAClD,UAAM,QAAQ,SAAS;AACvB,UAAM,EAAE,SAAS,IAAI,SAAS,OAAO,CAAC,MAAM,CAAC;AAE7C,cAAU,MAAM;AACd,eAAS,aAAa,YAAY;AAAA,IACpC,GAAG,CAAC,cAAc,WAAW,QAAQ,CAAC;AAEtC,UAAM,cAAc;AACpB,UAAM,iBAAiB,gBAAgB,OAAO;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,YACP,WAAW;AAAA,YACX,cAAc;AAAA,YACd,aAAa,EAAE;AAAA;AAAA,QAElB,GAAG;AAAA,QAEH,sBAAY,UAAU,KAAK;AAAA;AAAA,IAC9B;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAOnB,IAAM,cAAc;AAAA,EAClB,CAAC,EAAE,WAAW,UAAU,UAAU,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM,cAAc;AAEpB,UAAM,iBACJ,YAAY,UAAU,kCAAkC;AAE1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,YACP,WAAW;AAAA,YACX,cAAc;AAAA,YACd,WAAW,eAAe,cAAc,EAAE;AAAA,YAC1C,aAAa,EAAE;AAAA;AAAA,QAEnB,OACE,YAAY,UACR,EAAE,gBAAgB,QAAQ,iBAAiB,OAAO,IAClD;AAAA,QAEL,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAU1B,IAAM,WAAW;AAAA,EACf,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,QAAQ,aAAa,aAAa;AACxC,UAAM,EAAE,OAAO,eAAe,SAAS,IAAI,SAAS,OAAO,CAAC,MAAM,CAAC;AAEnE,UAAM,cAAc,CAClB,MACG;AACH,UAAI,CAAC,UAAU;AACb,iBAAS,KAAK;AAAA,MAChB;AACA,YAAM,UAAU,CAA8B;AAAA,IAChD;AAEA,UAAM,cAAc;AAAA,MAClB,MAAM;AAAA,MACN,iBAAiB;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,MACT,WAAW,CAAC,MAAoC;AAC9C,YAAI,CAAC,SAAS,GAAG,EAAE,SAAS,EAAE,GAAG,EAAG,aAAY,CAAC;AAAA,MACnD;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,MAC1B,aAAa,CAAC,MAAiC;AAC7C,UAAE,eAAe;AAAA,MACnB;AAAA,MACA,GAAG;AAAA,IACL;AAEA,UAAM,WAAsC;AAAA,MAC1C,MACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,WAAW;AAAA;AAAA;AAAA;AAAA,cAIP,kBAAkB,QAAQ,mCAAmC,eAAe;AAAA,cAC5E,aAAa,EAAE;AAAA;AAAA,UAElB,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,MAEF,OACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,WAAW;AAAA;AAAA;AAAA,cAGP,kBAAkB,QAAQ,KAAK,MAAM;AAAA;AAAA,UAExC,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,gBACF;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA,YACC,kBAAkB,SACjB,oBAAC,SAAI,WAAU,wCAAuC;AAAA;AAAA;AAAA,MAE1D;AAAA,MAEF,YACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,WAAW;AAAA;AAAA;AAAA,cAGP,kBAAkB,QAAQ,kBAAkB,eAAe;AAAA,cAC3D,aAAa,EAAE;AAAA;AAAA,UAElB,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,kBAAkB,QACd,yBACA;AAAA,gBACN;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA,YAEC,aACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,gBACV,eAAY;AAAA;AAAA,YACd;AAAA;AAAA;AAAA,MAEJ;AAAA,IAEJ;AAEA,WAAO,SAAS,OAAO,KAAK,SAAS,MAAM;AAAA,EAC7C;AACF;AACA,SAAS,cAAc;AAEvB,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEH;AAAA;AACH;AAGK,IAAM,iBAAiB,CAC5B,WACA,cACG;AACH,MAAI,CAAC,UAAW;AAChB,YAAU,SAAS;AAAA,IACjB,MAAM,cAAc,SAAS,OAAO;AAAA,IACpC,UAAU;AAAA,EACZ,CAAC;AACH;AAEO,IAAM,sBAAsB,CACjC,WACA,kBACA,sBACG;AACH,MAAI,CAAC,UAAW;AAChB,QAAM,EAAE,YAAY,aAAa,YAAY,IAAI;AACjD,mBAAiB,aAAa,CAAC;AAC/B,oBAAkB,aAAa,cAAc,WAAW;AAC1D;AASA,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,eAAe,OAAyB,IAAI;AAClD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,YAAU,MAAM;AACd,UAAM,cAAc,MAClB;AAAA,MACE,aAAa;AAAA,MACb;AAAA,MACA;AAAA,IACF;AACF,gBAAY;AACZ,UAAM,YAAY,aAAa;AAC/B,eAAW,iBAAiB,UAAU,WAAW;AACjD,WAAO,iBAAiB,UAAU,WAAW;AAC7C,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,WAAW;AACpD,aAAO,oBAAoB,UAAU,WAAW;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW,GAAG,mCAAmC,SAAS;AAAA,MAEzD;AAAA,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,eAAe,aAAa,SAAS,MAAM;AAAA,YAC1D,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ;AAAA,kCAAC,aAAU,MAAM,IAAI;AAAA,cACrB,oBAAC,UAAK,WAAU,WAAU,yBAAW;AAAA;AAAA;AAAA,QACvC;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAQ;AAAA,YACP,GAAG;AAAA,YAEJ,8BAAC,eAAY,KAAK,cAAc,SAAQ,SACrC,UACH;AAAA;AAAA,QACF;AAAA,QAEC,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,eAAe,aAAa,SAAS,OAAO;AAAA,YAC3D,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ;AAAA,kCAAC,cAAW,MAAM,IAAI;AAAA,cACtB,oBAAC,UAAK,WAAU,WAAU,0BAAY;AAAA;AAAA;AAAA,QACxC;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAM,cAAc,CAAC,UAAqB,UACxC,SAAS,IAAI,UAAU,CAAC,UAAU;AAChC,MAAI,CAAC,eAAe,KAAK,EAAG,QAAO;AAEnC,QAAM,aAAa;AACnB,QAAM,eAAe,WAAW,SAAS;AACzC,SAAO,aAAa,YAAY;AAAA,IAC9B,GAAI,eAAe,EAAE,MAAM,IAAI,CAAC;AAAA,IAChC,GAAI,WAAW,MAAM,WACjB,EAAE,UAAU,YAAY,WAAW,MAAM,UAAU,KAAK,EAAE,IAC1D,CAAC;AAAA,EACP,CAAC;AACH,CAAC;AAEH,IAAO,eAAQ;","names":[]}
@@ -8,6 +8,7 @@ declare const getStatusBadge: (status?: "correct" | "incorrect") => react_jsx_ru
8
8
  declare const Quiz: react.ForwardRefExoticComponent<{
9
9
  children: ReactNode;
10
10
  className?: string;
11
+ variant?: "result" | "default";
11
12
  } & react.RefAttributes<HTMLDivElement>>;
12
13
  declare const QuizHeaderResult: react.ForwardRefExoticComponent<{
13
14
  className?: string;
@@ -17,7 +18,6 @@ declare const QuizTitle: react.ForwardRefExoticComponent<{
17
18
  } & react.RefAttributes<HTMLDivElement>>;
18
19
  declare const QuizHeader: () => react_jsx_runtime.JSX.Element;
19
20
  declare const QuizContent: react.ForwardRefExoticComponent<{
20
- variant?: "result" | "default";
21
21
  paddingBottom?: string;
22
22
  } & react.RefAttributes<HTMLDivElement>>;
23
23
  interface QuizVariantInterface {
@@ -37,7 +37,6 @@ declare const QuizQuestionList: ({ filterType, onQuestionClick, }?: {
37
37
  }) => react_jsx_runtime.JSX.Element;
38
38
  declare const QuizFooter: react.ForwardRefExoticComponent<{
39
39
  className?: string;
40
- variant?: "result" | "default";
41
40
  onGoToSimulated?: () => void;
42
41
  onDetailResult?: () => void;
43
42
  handleFinishSimulated?: () => void;
@@ -8,6 +8,7 @@ declare const getStatusBadge: (status?: "correct" | "incorrect") => react_jsx_ru
8
8
  declare const Quiz: react.ForwardRefExoticComponent<{
9
9
  children: ReactNode;
10
10
  className?: string;
11
+ variant?: "result" | "default";
11
12
  } & react.RefAttributes<HTMLDivElement>>;
12
13
  declare const QuizHeaderResult: react.ForwardRefExoticComponent<{
13
14
  className?: string;
@@ -17,7 +18,6 @@ declare const QuizTitle: react.ForwardRefExoticComponent<{
17
18
  } & react.RefAttributes<HTMLDivElement>>;
18
19
  declare const QuizHeader: () => react_jsx_runtime.JSX.Element;
19
20
  declare const QuizContent: react.ForwardRefExoticComponent<{
20
- variant?: "result" | "default";
21
21
  paddingBottom?: string;
22
22
  } & react.RefAttributes<HTMLDivElement>>;
23
23
  interface QuizVariantInterface {
@@ -37,7 +37,6 @@ declare const QuizQuestionList: ({ filterType, onQuestionClick, }?: {
37
37
  }) => react_jsx_runtime.JSX.Element;
38
38
  declare const QuizFooter: react.ForwardRefExoticComponent<{
39
39
  className?: string;
40
- variant?: "result" | "default";
41
40
  onGoToSimulated?: () => void;
42
41
  onDetailResult?: () => void;
43
42
  handleFinishSimulated?: () => void;
@@ -994,6 +994,7 @@ var useQuizStore = (0, import_zustand2.create)()(
994
994
  isStarted: false,
995
995
  isFinished: false,
996
996
  userId: "",
997
+ variant: "default",
997
998
  // Setters
998
999
  setBySimulated: (simulado) => set({ bySimulated: simulado }),
999
1000
  setByActivity: (atividade) => set({ byActivity: atividade }),
@@ -1001,6 +1002,7 @@ var useQuizStore = (0, import_zustand2.create)()(
1001
1002
  setUserId: (userId) => set({ userId }),
1002
1003
  setUserAnswers: (userAnswers) => set({ userAnswers }),
1003
1004
  getUserId: () => get().userId,
1005
+ setVariant: (variant) => set({ variant }),
1004
1006
  // Navigation
1005
1007
  goToNextQuestion: () => {
1006
1008
  const { currentQuestionIndex, getTotalQuestions } = get();
@@ -4500,7 +4502,11 @@ var getStatusStyles = (variantCorrect) => {
4500
4502
  return "bg-error-background border-error-300";
4501
4503
  }
4502
4504
  };
4503
- var Quiz = (0, import_react12.forwardRef)(({ children, className, ...props }, ref) => {
4505
+ var Quiz = (0, import_react12.forwardRef)(({ children, className, variant = "default", ...props }, ref) => {
4506
+ const { setVariant } = useQuizStore();
4507
+ (0, import_react12.useEffect)(() => {
4508
+ setVariant(variant);
4509
+ }, [variant, setVariant]);
4504
4510
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
4505
4511
  "div",
4506
4512
  {
@@ -4609,8 +4615,8 @@ var QuizContainer = (0, import_react12.forwardRef)(({ children, className, ...pr
4609
4615
  }
4610
4616
  );
4611
4617
  });
4612
- var QuizContent = (0, import_react12.forwardRef)(({ variant, paddingBottom }) => {
4613
- const { getCurrentQuestion } = useQuizStore();
4618
+ var QuizContent = (0, import_react12.forwardRef)(({ paddingBottom }) => {
4619
+ const { getCurrentQuestion, variant } = useQuizStore();
4614
4620
  const currentQuestion = getCurrentQuestion();
4615
4621
  const questionComponents = {
4616
4622
  ["ALTERNATIVA" /* ALTERNATIVA */]: QuizAlternative,
@@ -5376,7 +5382,6 @@ var QuizFooter = (0, import_react12.forwardRef)(
5376
5382
  onGoToSimulated,
5377
5383
  onDetailResult,
5378
5384
  handleFinishSimulated,
5379
- variant = "default",
5380
5385
  ...props
5381
5386
  }, ref) => {
5382
5387
  const {
@@ -5390,6 +5395,7 @@ var QuizFooter = (0, import_react12.forwardRef)(
5390
5395
  skipQuestion,
5391
5396
  getCurrentQuestion,
5392
5397
  getQuestionStatusFromUserAnswers,
5398
+ variant,
5393
5399
  getActiveQuiz
5394
5400
  } = useQuizStore();
5395
5401
  const totalQuestions = getTotalQuestions();
@@ -5401,6 +5407,7 @@ var QuizFooter = (0, import_react12.forwardRef)(
5401
5407
  const [alertDialogOpen, setAlertDialogOpen] = (0, import_react12.useState)(false);
5402
5408
  const [modalResultOpen, setModalResultOpen] = (0, import_react12.useState)(false);
5403
5409
  const [modalNavigateOpen, setModalNavigateOpen] = (0, import_react12.useState)(false);
5410
+ const [modalResolutionOpen, setModalResolutionOpen] = (0, import_react12.useState)(false);
5404
5411
  const [filterType, setFilterType] = (0, import_react12.useState)("all");
5405
5412
  const unansweredQuestions = getUnansweredQuestionsFromUserAnswers();
5406
5413
  const userAnswers = getUserAnswers();
@@ -5515,7 +5522,16 @@ var QuizFooter = (0, import_react12.forwardRef)(
5515
5522
  children: "Avan\xE7ar"
5516
5523
  }
5517
5524
  )
5518
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-row items-center justify-end w-full", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default, { variant: "solid", action: "primary", size: "medium", children: "Ver Resolu\xE7\xE3o" }) })
5525
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-row items-center justify-end w-full", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
5526
+ Button_default,
5527
+ {
5528
+ variant: "solid",
5529
+ action: "primary",
5530
+ size: "medium",
5531
+ onClick: () => setModalResolutionOpen(true),
5532
+ children: "Ver Resolu\xE7\xE3o"
5533
+ }
5534
+ ) })
5519
5535
  }
5520
5536
  ),
5521
5537
  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -5617,6 +5633,16 @@ var QuizFooter = (0, import_react12.forwardRef)(
5617
5633
  ) })
5618
5634
  ] })
5619
5635
  }
5636
+ ),
5637
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
5638
+ Modal_default,
5639
+ {
5640
+ isOpen: modalResolutionOpen,
5641
+ onClose: () => setModalResolutionOpen(false),
5642
+ title: "Resolu\xE7\xE3o",
5643
+ size: "lg",
5644
+ children: currentQuestion?.answerKey
5645
+ }
5620
5646
  )
5621
5647
  ] });
5622
5648
  }