@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-3JYYPJFD.js

@@ -0,0 +1,196 @@
+import {
+  Stepper
+} from "./chunk-CJL5D2IT.js";
+import {
+  EmptyState
+} from "./chunk-7M5BACFQ.js";
+
+// src/components/data-display/SectionOnboarding/SectionOnboarding.tsx
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OnboardingSteps = ({ steps, activeStepId, completedStepIds, dataTestId }) => {
+  if (!steps || steps.length === 0) return null;
+  const activeId = activeStepId ?? steps[0]?.id ?? "";
+  return /* @__PURE__ */ jsx(Box, { sx: { width: "100%", overflowX: "auto", pb: 1 }, children: /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      steps,
+      activeId,
+      completed: new Set(completedStepIds ?? []),
+      size: "sm",
+      "data-testid": `${dataTestId}-steps`
+    }
+  ) });
+};
+var ConfiguredSummary = ({
+  configuredTitle,
+  title,
+  configuredSummary,
+  dataTestId,
+  expanded,
+  onToggle,
+  editLabel,
+  collapseLabel,
+  hasChildren
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: { xs: "column", sm: "row" },
+      spacing: 2,
+      alignItems: { xs: "flex-start", sm: "center" },
+      "data-testid": `${dataTestId}-summary`,
+      children: [
+        /* @__PURE__ */ jsx(CheckCircle, { sx: { color: theme.palette.success.main }, "aria-hidden": true }),
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", component: "h3", fontWeight: "medium", children: configuredTitle ?? title }),
+          configuredSummary && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "div", children: configuredSummary })
+        ] }),
+        hasChildren && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            onClick: onToggle,
+            "aria-expanded": expanded,
+            "data-testid": `${dataTestId}-edit-toggle`,
+            children: expanded ? collapseLabel : editLabel
+          }
+        )
+      ]
+    }
+  );
+};
+var ConfiguredView = ({
+  title,
+  configuredTitle,
+  configuredSummary,
+  editLabel,
+  collapseLabel,
+  defaultExpanded = false,
+  children,
+  className,
+  dataTestId = "section-onboarding"
+}) => {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      "data-status": "configured",
+      sx: { p: 2, borderRadius: 1, border: 1, borderColor: "divider" },
+      children: [
+        /* @__PURE__ */ jsx(
+          ConfiguredSummary,
+          {
+            configuredTitle,
+            title,
+            configuredSummary,
+            dataTestId,
+            expanded,
+            onToggle: () => setExpanded((prev) => !prev),
+            editLabel,
+            collapseLabel,
+            hasChildren: Boolean(children)
+          }
+        ),
+        children && /* @__PURE__ */ jsx(Collapse, { in: expanded, unmountOnExit: true, children: /* @__PURE__ */ jsx(Box, { sx: { mt: 3 }, "data-testid": `${dataTestId}-content`, children }) })
+      ]
+    }
+  );
+};
+var InProgressView = ({
+  steps,
+  activeStepId,
+  completedStepIds,
+  children,
+  className,
+  statusAttr,
+  dataTestId = "section-onboarding"
+}) => /* @__PURE__ */ jsxs(Stack, { className, "data-testid": dataTestId, "data-status": statusAttr, spacing: 3, children: [
+  /* @__PURE__ */ jsx(
+    OnboardingSteps,
+    {
+      steps,
+      activeStepId,
+      completedStepIds,
+      dataTestId
+    }
+  ),
+  children && /* @__PURE__ */ jsx(Box, { "data-testid": `${dataTestId}-content`, children })
+] });
+var HeroView = ({
+  title,
+  description,
+  illustration,
+  steps,
+  activeStepId,
+  completedStepIds,
+  primaryAction,
+  startLabel,
+  secondaryAction,
+  helpLink,
+  children,
+  className,
+  onStart,
+  dataTestId = "section-onboarding"
+}) => {
+  const heroPrimary = primaryAction ?? (children ? { label: startLabel, onClick: onStart } : void 0);
+  return /* @__PURE__ */ jsxs(Stack, { className, "data-testid": dataTestId, "data-status": "unconfigured", spacing: 1, children: [
+    /* @__PURE__ */ jsx(
+      OnboardingSteps,
+      {
+        steps,
+        activeStepId,
+        completedStepIds,
+        dataTestId
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: illustration ? "illustrated" : "action",
+        title,
+        description,
+        illustration,
+        primaryAction: heroPrimary,
+        secondaryAction,
+        helpLink,
+        dataTestId: `${dataTestId}-hero`
+      }
+    )
+  ] });
+};
+var SectionOnboarding = (props) => {
+  const [started, setStarted] = React.useState(false);
+  if (props.status === "configured") {
+    return /* @__PURE__ */ jsx(ConfiguredView, { ...props });
+  }
+  if (props.status === "in-progress" || started) {
+    return /* @__PURE__ */ jsx(
+      InProgressView,
+      {
+        ...props,
+        statusAttr: props.status === "in-progress" ? "in-progress" : "started"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(HeroView, { ...props, onStart: () => setStarted(true) });
+};
+SectionOnboarding.displayName = "SectionOnboarding";
+var SectionOnboarding_default = SectionOnboarding;
+
+export {
+  SectionOnboarding,
+  SectionOnboarding_default
+};
+//# sourceMappingURL=chunk-3JYYPJFD.js.map

package/dist/chunk-3JYYPJFD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/SectionOnboarding/SectionOnboarding.tsx"],"sourcesContent":["'use client';\n\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { EmptyState } from '../EmptyState/EmptyState';\nimport { Stepper } from '../Stepper/Stepper';\nimport type { SectionOnboardingProps } from './SectionOnboarding.types';\n\n/** The setup steps rendered above the hero / form. Returns null when omitted. */\nconst OnboardingSteps: React.FC<\n  Pick<SectionOnboardingProps, 'steps' | 'activeStepId' | 'completedStepIds'> & {\n    dataTestId: string;\n  }\n> = ({ steps, activeStepId, completedStepIds, dataTestId }) => {\n  if (!steps || steps.length === 0) return null;\n  // Preview mode (no active step): highlight the first so the flow reads L→R.\n  const activeId = activeStepId ?? steps[0]?.id ?? '';\n  return (\n    <Box sx={{ width: '100%', overflowX: 'auto', pb: 1 }}>\n      <Stepper\n        steps={steps}\n        activeId={activeId}\n        completed={new Set(completedStepIds ?? [])}\n        size=\"sm\"\n        data-testid={`${dataTestId}-steps`}\n      />\n    </Box>\n  );\n};\n\n/** The compact \"already connected\" header shown in the configured state. */\nconst ConfiguredSummary: React.FC<\n  Pick<SectionOnboardingProps, 'configuredTitle' | 'title' | 'configuredSummary'> & {\n    dataTestId: string;\n    expanded: boolean;\n    onToggle: () => void;\n    editLabel: string;\n    collapseLabel: string;\n    hasChildren: boolean;\n  }\n> = ({\n  configuredTitle,\n  title,\n  configuredSummary,\n  dataTestId,\n  expanded,\n  onToggle,\n  editLabel,\n  collapseLabel,\n  hasChildren,\n}) => {\n  const theme = useTheme();\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={2}\n      alignItems={{ xs: 'flex-start', sm: 'center' }}\n      data-testid={`${dataTestId}-summary`}\n    >\n      <CheckCircle sx={{ color: theme.palette.success.main }} aria-hidden />\n      <Box sx={{ minWidth: 0 }}>\n        <Typography variant=\"subtitle1\" component=\"h3\" fontWeight=\"medium\">\n          {configuredTitle ?? title}\n        </Typography>\n        {configuredSummary && (\n          <Typography variant=\"body2\" color=\"text.secondary\" component=\"div\">\n            {configuredSummary}\n          </Typography>\n        )}\n      </Box>\n      {hasChildren && (\n        <Button\n          variant=\"outlined\"\n          size=\"small\"\n          onClick={onToggle}\n          aria-expanded={expanded}\n          data-testid={`${dataTestId}-edit-toggle`}\n        >\n          {expanded ? collapseLabel : editLabel}\n        </Button>\n      )}\n    </Stack>\n  );\n};\n\n/**\n * Per-section onboarding wrapper: the same config surface renders three ways\n * depending on `status`, so a first-time user meets a friendly hero + CTA\n * instead of a wall of empty fields, while a returning user sees a compact\n * \"it's connected\" summary with the form tucked behind an \"Editar\" toggle.\n *\n * Composes the existing {@link EmptyState} (the hero) and {@link Stepper} (the\n * progress preview) — drop it onto any settings/integration page and drive it\n * from whatever \"is this configured?\" signal the feature already has.\n */\n/** Configured state: compact success summary + the form behind an \"Editar\" toggle. */\nconst ConfiguredView: React.FC<SectionOnboardingProps> = ({\n  title,\n  configuredTitle,\n  configuredSummary,\n  editLabel,\n  collapseLabel,\n  defaultExpanded = false,\n  children,\n  className,\n  dataTestId = 'section-onboarding',\n}) => {\n  const [expanded, setExpanded] = React.useState(defaultExpanded);\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      data-status=\"configured\"\n      sx={{ p: 2, borderRadius: 1, border: 1, borderColor: 'divider' }}\n    >\n      <ConfiguredSummary\n        configuredTitle={configuredTitle}\n        title={title}\n        configuredSummary={configuredSummary}\n        dataTestId={dataTestId}\n        expanded={expanded}\n        onToggle={() => setExpanded((prev) => !prev)}\n        editLabel={editLabel}\n        collapseLabel={collapseLabel}\n        hasChildren={Boolean(children)}\n      />\n      {children && (\n        <Collapse in={expanded} unmountOnExit>\n          <Box sx={{ mt: 3 }} data-testid={`${dataTestId}-content`}>\n            {children}\n          </Box>\n        </Collapse>\n      )}\n    </Box>\n  );\n};\n\n/** In-progress state (or a started hero): the live stepper + the form. */\nconst InProgressView: React.FC<SectionOnboardingProps & { statusAttr: string }> = ({\n  steps,\n  activeStepId,\n  completedStepIds,\n  children,\n  className,\n  statusAttr,\n  dataTestId = 'section-onboarding',\n}) => (\n  <Stack className={className} data-testid={dataTestId} data-status={statusAttr} spacing={3}>\n    <OnboardingSteps\n      steps={steps}\n      activeStepId={activeStepId}\n      completedStepIds={completedStepIds}\n      dataTestId={dataTestId}\n    />\n    {children && <Box data-testid={`${dataTestId}-content`}>{children}</Box>}\n  </Stack>\n);\n\n/** Unconfigured hero: optional step preview + the EmptyState hero + CTA. */\nconst HeroView: React.FC<SectionOnboardingProps & { onStart: () => void }> = ({\n  title,\n  description,\n  illustration,\n  steps,\n  activeStepId,\n  completedStepIds,\n  primaryAction,\n  startLabel,\n  secondaryAction,\n  helpLink,\n  children,\n  className,\n  onStart,\n  dataTestId = 'section-onboarding',\n}) => {\n  // With no custom primaryAction, offer a built-in CTA that reveals the form.\n  const heroPrimary =\n    primaryAction ?? (children ? { label: startLabel, onClick: onStart } : undefined);\n  return (\n    <Stack className={className} data-testid={dataTestId} data-status=\"unconfigured\" spacing={1}>\n      <OnboardingSteps\n        steps={steps}\n        activeStepId={activeStepId}\n        completedStepIds={completedStepIds}\n        dataTestId={dataTestId}\n      />\n      <EmptyState\n        variant={illustration ? 'illustrated' : 'action'}\n        title={title}\n        description={description}\n        illustration={illustration}\n        primaryAction={heroPrimary}\n        secondaryAction={secondaryAction}\n        helpLink={helpLink}\n        dataTestId={`${dataTestId}-hero`}\n      />\n    </Stack>\n  );\n};\n\nexport const SectionOnboarding: React.FC<SectionOnboardingProps> = (props) => {\n  // Lets the hero reveal the form in place, so a server page can adopt\n  // onboarding by passing `status` + children alone — no client wrapper.\n  const [started, setStarted] = React.useState(false);\n\n  if (props.status === 'configured') {\n    return <ConfiguredView {...props} />;\n  }\n  if (props.status === 'in-progress' || started) {\n    return (\n      <InProgressView\n        {...props}\n        statusAttr={props.status === 'in-progress' ? 'in-progress' : 'started'}\n      />\n    );\n  }\n  return <HeroView {...props} onStart={() => setStarted(true)} />;\n};\n\nSectionOnboarding.displayName = 'SectionOnboarding';\n\nexport default SectionOnboarding;\n"],"mappings":"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","names":[]}

package/dist/chunk-3QGRQNTP.js

@@ -0,0 +1,193 @@
+import {
+  MenubarToolbar
+} from "./chunk-FWL2N2KH.js";
+import {
+  barStyles
+} from "./chunk-DJORMYOV.js";
+import {
+  useMenubarMenus
+} from "./chunk-42VH7N5L.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Menubar/Menubar.tsx
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import AppBar from "@mui/material/AppBar/index.js";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "neutral",
+  orientation: "horizontal",
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  sticky: false,
+  transparent: false,
+  blur: false,
+  elevation: 4,
+  fullWidth: true
+};
+var Menubar = (props) => {
+  const {
+    ariaLabel,
+    items,
+    variant,
+    size,
+    color,
+    orientation,
+    glow,
+    pulse,
+    glass,
+    gradient,
+    loading,
+    disabled,
+    className,
+    style,
+    logo,
+    endContent,
+    sticky,
+    transparent,
+    blur,
+    elevation,
+    fullWidth,
+    onClick,
+    onFocus,
+    onBlur,
+    "data-testid": dataTestId
+  } = withDefaults(props, DEFAULTS);
+  const theme = useTheme();
+  const { activeMenu, menuRefs, handleMenuOpen, handleMenuClose, handleItemClick } = useMenubarMenus(onClick);
+  const isVertical = orientation === "vertical";
+  const barSx = barStyles(theme, {
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    glass,
+    gradient,
+    blur,
+    transparent,
+    elevation
+  });
+  const content = /* @__PURE__ */ jsx(
+    MenubarToolbar,
+    {
+      ariaLabel,
+      barSx,
+      items,
+      size,
+      orientation,
+      disabled,
+      loading,
+      logo,
+      endContent,
+      fullWidth,
+      activeMenu,
+      menuRefs,
+      onOpen: handleMenuOpen,
+      onActivate: handleItemClick,
+      onClose: handleMenuClose,
+      onFocus,
+      onBlur
+    }
+  );
+  if (isVertical) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className,
+        sx: {
+          ...style,
+          position: sticky ? "sticky" : "relative",
+          top: sticky ? 0 : "auto",
+          zIndex: theme.zIndex.appBar
+        },
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    AppBar,
+    {
+      position: sticky ? "sticky" : "static",
+      className,
+      "data-testid": dataTestId,
+      sx: { ...barSx, ...style },
+      elevation: 0,
+      component: "header",
+      children: content
+    }
+  );
+};
+var MenubarGroup = ({
+  label,
+  items,
+  icon,
+  disabled,
+  open,
+  onOpenChange,
+  onClick,
+  className,
+  style
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const isOpen = open !== void 0 ? open : Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+    onOpenChange?.(true);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    onOpenChange?.(false);
+  };
+  const handleItemClick = (item) => {
+    if (item.action) {
+      item.action();
+    }
+    onClick?.(item);
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleClick,
+        disabled,
+        startIcon: icon,
+        endIcon: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}),
+        className,
+        sx: style,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open: isOpen, onClose: handleClose, children: items.map(
+      (item) => item.divider ? /* @__PURE__ */ jsx(Divider, {}, item.id) : /* @__PURE__ */ jsxs(MenuItem, { onClick: () => handleItemClick(item), disabled: item.disabled, children: [
+        item.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: item.icon }),
+        /* @__PURE__ */ jsx(ListItemText, { children: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { ml: 2 }, children: item.shortcut })
+      ] }, item.id)
+    ) })
+  ] });
+};
+
+export {
+  Menubar,
+  MenubarGroup
+};
+//# sourceMappingURL=chunk-3QGRQNTP.js.map

package/dist/chunk-3QGRQNTP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Menubar/Menubar.tsx"],"sourcesContent":["import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport AppBar from '@mui/material/AppBar/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useState } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { useMenubarMenus } from './Menubar.hooks';\nimport { barStyles } from './Menubar.styles';\nimport { MenubarToolbar } from './Menubar.toolbar';\n\nimport type {\n  MenubarGroupProps,\n  MenubarItem,\n  MenubarProps,\n} from './Menubar.types';\n\nconst DEFAULTS = {\n  variant: 'default',\n  size: 'md',\n  color: 'neutral',\n  orientation: 'horizontal',\n  glow: false,\n  pulse: false,\n  glass: false,\n  gradient: false,\n  loading: false,\n  disabled: false,\n  sticky: false,\n  transparent: false,\n  blur: false,\n  elevation: 4,\n  fullWidth: true,\n} satisfies Partial<MenubarProps>;\n\ntype ResolvedProps = MenubarProps & Required<Pick<MenubarProps, keyof typeof DEFAULTS>>;\n\nexport const Menubar: React.FC<MenubarProps> = (props) => {\n  const {\n    ariaLabel, items, variant, size, color, orientation, glow, pulse, glass, gradient,\n    loading, disabled, className, style, logo, endContent, sticky, transparent,\n    blur, elevation, fullWidth, onClick, onFocus, onBlur,\n    'data-testid': dataTestId,\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const theme = useTheme();\n  const { activeMenu, menuRefs, handleMenuOpen, handleMenuClose, handleItemClick } =\n    useMenubarMenus(onClick);\n\n  const isVertical = orientation === 'vertical';\n\n  const barSx = barStyles(theme, {\n    variant, size, color, glow, pulse, glass, gradient, blur, transparent, elevation,\n  });\n\n  const content = (\n    <MenubarToolbar\n      ariaLabel={ariaLabel}\n      barSx={barSx}\n      items={items}\n      size={size}\n      orientation={orientation}\n      disabled={disabled}\n      loading={loading}\n      logo={logo}\n      endContent={endContent}\n      fullWidth={fullWidth}\n      activeMenu={activeMenu}\n      menuRefs={menuRefs}\n      onOpen={handleMenuOpen}\n      onActivate={handleItemClick}\n      onClose={handleMenuClose}\n      onFocus={onFocus}\n      onBlur={onBlur}\n    />\n  );\n\n  // A vertical bar is not an app bar: AppBar's fixed/sticky positioning assumes\n  // a horizontal strip at the top of the page.\n  if (isVertical) {\n    return (\n      <Box\n        className={className}\n        sx={{\n          ...style,\n          position: sticky ? 'sticky' : 'relative',\n          top: sticky ? 0 : 'auto',\n          zIndex: theme.zIndex.appBar,\n        }}\n      >\n        {content}\n      </Box>\n    );\n  }\n\n  return (\n    <AppBar\n      position={sticky ? 'sticky' : 'static'}\n      className={className}\n      data-testid={dataTestId}\n      sx={{ ...barSx, ...style }}\n      elevation={0}\n      component=\"header\"\n    >\n      {content}\n    </AppBar>\n  );\n};\n\n\nexport const MenubarGroup: React.FC<MenubarGroupProps> = ({\n  label,\n  items,\n  icon,\n  disabled,\n  open,\n  onOpenChange,\n  onClick,\n  className,\n  style,\n}) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isOpen = open !== undefined ? open : Boolean(anchorEl);\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n    onOpenChange?.(true);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n    onOpenChange?.(false);\n  };\n\n  const handleItemClick = (item: MenubarItem) => {\n    if (item.action) {\n      item.action();\n    }\n    onClick?.(item);\n    handleClose();\n  };\n\n  return (\n    <>\n      <Button\n        onClick={handleClick}\n        disabled={disabled}\n        startIcon={icon}\n        endIcon={<KeyboardArrowDownIcon />}\n        className={className}\n        sx={style}\n      >\n        {label}\n      </Button>\n      <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose}>\n        {items.map((item) =>\n          item.divider ? (\n            <Divider key={item.id} />\n          ) : (\n            <MenuItem key={item.id} onClick={() => handleItemClick(item)} disabled={item.disabled}>\n              {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}\n              <ListItemText>{item.label}</ListItemText>\n              {item.shortcut && (\n                <Typography variant=\"caption\" sx={{ ml: 2 }}>\n                  {item.shortcut}\n                </Typography>\n              )}\n            </MenuItem>\n          ),\n        )}\n      </Menu>\n    </>\n  );\n};\n\nexport { MenubarSeparator } from './Menubar.separator';\n"],"mappings":"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","names":[]}

package/dist/chunk-3T5Z5HXF.js

@@ -0,0 +1,276 @@
+// src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts
+import { keyframes } from "@mui/material/styles/index.js";
+var rotateAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var translateAnimation = keyframes`
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+`;
+var glowPulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+  50% {
+    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
+  }
+  100% {
+    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+`;
+var bounceAnimation = keyframes`
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-20px);
+  }
+  60% {
+    transform: translateY(-10px);
+  }
+`;
+var shakeAnimation = keyframes`
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+`;
+var flipAnimation = keyframes`
+  0% {
+    transform: perspective(400px) rotateY(0);
+  }
+  100% {
+    transform: perspective(400px) rotateY(360deg);
+  }
+`;
+var spinAnimation = keyframes`
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+`;
+var fadeInOutAnimation = keyframes`
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+`;
+var heartbeatAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1);
+  }
+  5% {
+    transform: scale(1.25);
+  }
+  10% {
+    transform: scale(1);
+  }
+  15% {
+    transform: scale(1.25);
+  }
+  20% {
+    transform: scale(1);
+  }
+`;
+var wobbleAnimation = keyframes`
+  0%, 100% {
+    transform: translateX(0) rotate(0deg);
+  }
+  15% {
+    transform: translateX(-10px) rotate(-5deg);
+  }
+  30% {
+    transform: translateX(8px) rotate(3deg);
+  }
+  45% {
+    transform: translateX(-6px) rotate(-3deg);
+  }
+  60% {
+    transform: translateX(4px) rotate(2deg);
+  }
+  75% {
+    transform: translateX(-2px) rotate(-1deg);
+  }
+`;
+var morphAnimation = keyframes`
+  0%, 100% {
+    border-radius: 50%;
+    transform: scale(1);
+  }
+  25% {
+    border-radius: 30%;
+    transform: scale(1.1);
+  }
+  50% {
+    border-radius: 20%;
+    transform: scale(0.95);
+  }
+  75% {
+    border-radius: 40%;
+    transform: scale(1.05);
+  }
+`;
+var swingAnimation = keyframes`
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`;
+var floatAnimation = keyframes`
+  0%, 100% {
+    transform: translateY(0) translateX(0);
+  }
+  33% {
+    transform: translateY(-10px) translateX(-5px);
+  }
+  66% {
+    transform: translateY(5px) translateX(5px);
+  }
+`;
+var jelloAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(0.9, 1.1);
+  }
+  50% {
+    transform: scale(1.1, 0.9);
+  }
+  75% {
+    transform: scale(0.95, 1.05);
+  }
+`;
+var rippleAnimation = keyframes`
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+`;
+var neonFlickerAnimation = keyframes`
+  0%, 100% {
+    opacity: 1;
+    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+  }
+  10% {
+    opacity: 0.8;
+    filter: brightness(0.8) drop-shadow(0 0 5px currentColor);
+  }
+  20% {
+    opacity: 1;
+    filter: brightness(1.2) drop-shadow(0 0 15px currentColor);
+  }
+  30% {
+    opacity: 0.9;
+    filter: brightness(0.9) drop-shadow(0 0 8px currentColor);
+  }
+  40% {
+    opacity: 1;
+    filter: brightness(1.1) drop-shadow(0 0 12px currentColor);
+  }
+  50% {
+    opacity: 0.95;
+    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+  }
+  60% {
+    opacity: 0.85;
+    filter: brightness(0.85) drop-shadow(0 0 6px currentColor);
+  }
+  70% {
+    opacity: 1;
+    filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
+  }
+  80% {
+    opacity: 0.9;
+    filter: brightness(0.95) drop-shadow(0 0 9px currentColor);
+  }
+  90% {
+    opacity: 1;
+    filter: brightness(1.05) drop-shadow(0 0 11px currentColor);
+  }
+`;
+var breatheAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+  50% {
+    transform: scale(1.05);
+    filter: brightness(1.2);
+  }
+`;
+
+export {
+  rotateAnimation,
+  pulseAnimation,
+  translateAnimation,
+  glowPulseAnimation,
+  bounceAnimation,
+  shakeAnimation,
+  flipAnimation,
+  spinAnimation,
+  fadeInOutAnimation,
+  heartbeatAnimation,
+  wobbleAnimation,
+  morphAnimation,
+  swingAnimation,
+  floatAnimation,
+  jelloAnimation,
+  rippleAnimation,
+  neonFlickerAnimation,
+  breatheAnimation
+};
+//# sourceMappingURL=chunk-3T5Z5HXF.js.map