@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-72DKEBJM.js

@@ -0,0 +1,110 @@
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/ContentToolbar/ViewSelector.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import GridIcon from "@mui/icons-material/GridViewOutlined";
+import ListIcon from "@mui/icons-material/FormatListBulletedRounded";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/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 Slider from "@mui/material/Slider/index.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VIEW_OPTIONS = [
+  { value: "grid", label: "Grid View", icon: GridIcon },
+  { value: "list", label: "List View", icon: ListIcon }
+];
+function ViewSelector({
+  viewMode,
+  onViewModeChange,
+  zoom,
+  onZoomChange,
+  cardSizeLabel
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
+  const ActiveIcon = activeOption.icon;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+      Slider,
+      {
+        "data-testid": "resize-card-slider",
+        "aria-label": cardSizeLabel,
+        value: zoom[0] ?? 0,
+        onChange: (_, value) => onZoomChange([value]),
+        min: 0,
+        max: 100,
+        step: 1,
+        size: "small"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-testid": "view-mode-btn",
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "aria-label": activeOption.label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: "text.secondary" },
+        children: [
+          /* @__PURE__ */ jsx(ActiveIcon, { sx: { fontSize: sxRem(16) } }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: sxRem(14) } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: () => setAnchorEl(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { minWidth: 180 } } },
+        children: VIEW_OPTIONS.map((option) => {
+          const OptionIcon = option.icon;
+          const selected = viewMode === option.value;
+          return /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              "data-testid": `view-mode-${option.value}`,
+              onClick: () => {
+                onViewModeChange(option.value);
+                setAnchorEl(null);
+              },
+              sx: { gap: 1.5 },
+              children: [
+                /* @__PURE__ */ jsx(ListItemText, { children: option.label }),
+                /* @__PURE__ */ jsx(OptionIcon, { sx: { fontSize: sxRem(16), color: "text.secondary" } }),
+                /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: "auto !important" }, children: /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: sxRem(16), color: selected ? "text.primary" : "transparent" } }) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export {
+  ViewSelector
+};
+//# sourceMappingURL=chunk-72DKEBJM.js.map

package/dist/chunk-72DKEBJM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ViewSelector.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport GridIcon from '@mui/icons-material/GridViewOutlined';\nimport ListIcon from '@mui/icons-material/FormatListBulletedRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/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 Slider from '@mui/material/Slider/index.js';\n// `SvgIconComponent` is declared inline in @mui/icons-material's barrel and has\n// no module of its own, so the deep-import equivalent is its own definition:\n// `type SvgIconComponent = typeof SvgIcon`.\nimport type SvgIcon from '@mui/material/SvgIcon/index.js';\nimport React, { useState } from 'react';\n\nimport type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\nconst VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [\n  { value: 'grid', label: 'Grid View', icon: GridIcon },\n  { value: 'list', label: 'List View', icon: ListIcon },\n];\n\n/**\n * View selector: a grid/list dropdown plus a card-size zoom slider (grid mode\n * only). Faithful MUI port of the reference toolbar's view control.\n */\nexport function ViewSelector({\n  viewMode,\n  onViewModeChange,\n  zoom,\n  onZoomChange,\n  cardSizeLabel,\n}: ViewSelectorProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;\n  const ActiveIcon = activeOption.icon;\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n      {viewMode === 'grid' && (\n        <Box sx={{ width: 96, display: 'flex', alignItems: 'center' }}>\n          <Slider\n            data-testid=\"resize-card-slider\"\n            aria-label={cardSizeLabel}\n            value={zoom[0] ?? 0}\n            onChange={(_, value) => onZoomChange([value as number])}\n            min={0}\n            max={100}\n            step={1}\n            size=\"small\"\n          />\n        </Box>\n      )}\n\n      <Button\n        data-testid=\"view-mode-btn\"\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        aria-label={activeOption.label}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}\n      >\n        <ActiveIcon sx={{ fontSize: sxRem(16) }} />\n        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />\n      </Button>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: 180 } } }}\n      >\n        {VIEW_OPTIONS.map((option) => {\n          const OptionIcon = option.icon;\n          const selected = viewMode === option.value;\n          return (\n            <MenuItem\n              key={option.value}\n              data-testid={`view-mode-${option.value}`}\n              onClick={() => {\n                onViewModeChange(option.value);\n                setAnchorEl(null);\n              }}\n              sx={{ gap: 1.5 }}\n            >\n              <ListItemText>{option.label}</ListItemText>\n              <OptionIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />\n              <ListItemIcon sx={{ minWidth: 'auto !important' }}>\n                <CheckIcon sx={{ fontSize: sxRem(16), color: selected ? 'text.primary' : 'transparent' }} />\n              </ListItemIcon>\n            </MenuItem>\n          );\n        })}\n      </Menu>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-73HBIIRB.js

@@ -0,0 +1,134 @@
+import {
+  resolveLightboxProps
+} from "./chunk-UOS7DEQZ.js";
+import {
+  useLightbox
+} from "./chunk-2AKQPXSJ.js";
+import {
+  LightboxThumbnails
+} from "./chunk-7ZWC5CKA.js";
+import {
+  LightboxStage
+} from "./chunk-JWK4GI2I.js";
+import {
+  LightboxOverlay
+} from "./chunk-KLMP2BYC.js";
+import {
+  LightboxCurrentMedia
+} from "./chunk-2DWBJJK6.js";
+import {
+  LightboxCopyProvider
+} from "./chunk-TEQYTEM2.js";
+import {
+  makeTestId
+} from "./chunk-TFZI36UD.js";
+import {
+  scrim
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/Lightbox/Lightbox.tsx
+import Dialog from "@mui/material/Dialog/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_STATIC_PROPS = {
+  maxWidth: false,
+  fullScreen: true,
+  TransitionComponent: Fade,
+  TransitionProps: { timeout: 300 },
+  PaperProps: { sx: { background: (theme) => scrim(theme, 0.9), backdropFilter: "blur(2px)" } },
+  "aria-label": "Lightbox",
+  "aria-labelledby": "lightbox-title",
+  role: "dialog",
+  "aria-modal": "true"
+};
+var Lightbox = React.forwardRef((componentProps, ref) => {
+  const props = resolveLightboxProps(componentProps);
+  const { isOpen, items, loop, autoplay, showControls, showCaptions, thumbnails, zoomable } = props;
+  const { className, style, dataTestId } = props;
+  const testId = makeTestId(dataTestId);
+  const lightbox = useLightbox(props, ref);
+  const { currentIndex, currentItem, zoom } = lightbox;
+  return /* @__PURE__ */ jsx(LightboxCopyProvider, { copy: props.copy, children: /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: isOpen,
+      onClose: lightbox.close,
+      ...DIALOG_STATIC_PROPS,
+      className,
+      style,
+      onTouchStart: lightbox.handleTouchStart,
+      onTouchEnd: lightbox.handleTouchEnd,
+      "data-testid": dataTestId || "lightbox",
+      children: [
+        /* @__PURE__ */ jsxs(Typography, { id: "lightbox-title", variant: "h6", sx: { position: "absolute", left: -1e4 }, children: [
+          "Lightbox - ",
+          currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`
+        ] }),
+        /* @__PURE__ */ jsx(
+          LightboxOverlay,
+          {
+            testId,
+            itemCount: items.length,
+            currentIndex,
+            showControls,
+            loop,
+            autoplay,
+            canZoom: lightbox.canZoom,
+            isAutoPlaying: lightbox.isAutoPlaying,
+            onClose: lightbox.close,
+            onPrev: lightbox.prev,
+            onNext: lightbox.next,
+            onZoomIn: zoom.zoomIn,
+            onZoomOut: zoom.zoomOut,
+            onResetZoom: zoom.resetZoom,
+            onToggleAutoplay: () => lightbox.setIsAutoPlaying((playing) => !playing)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LightboxStage,
+          {
+            items,
+            currentItem,
+            currentIndex,
+            isLoading: lightbox.isLoading,
+            showCaptions,
+            thumbnails,
+            testId,
+            media: /* @__PURE__ */ jsx(
+              LightboxCurrentMedia,
+              {
+                item: currentItem,
+                index: currentIndex,
+                total: items.length,
+                zoomable,
+                zoom,
+                testId,
+                onLoadingChange: lightbox.setIsLoading,
+                onWheel: lightbox.handleWheel
+              }
+            ),
+            thumbnailStrip: thumbnails && items.length > 1 && /* @__PURE__ */ jsx(
+              LightboxThumbnails,
+              {
+                items,
+                currentIndex,
+                testId,
+                onSelect: lightbox.goToIndex
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+});
+Lightbox.displayName = "Lightbox";
+var Lightbox_default = Lightbox;
+
+export {
+  Lightbox,
+  Lightbox_default
+};
+//# sourceMappingURL=chunk-73HBIIRB.js.map

package/dist/chunk-73HBIIRB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.tsx"],"sourcesContent":["import Dialog from '@mui/material/Dialog/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId } from './Lightbox.constants';\nimport { resolveLightboxProps } from './Lightbox.helpers';\nimport { LightboxCopyProvider } from './lightbox-copy-context';\nimport type { LightboxProps, LightboxRef } from './Lightbox.types';\nimport { LightboxCurrentMedia } from './LightboxCurrentMedia';\nimport { LightboxOverlay } from './LightboxOverlay';\nimport { LightboxStage } from './LightboxStage';\nimport { LightboxThumbnails } from './LightboxThumbnails';\nimport { useLightbox } from './useLightbox';\nimport { scrim } from '../../../tokens/ink';\n\nconst DIALOG_STATIC_PROPS = {\n  maxWidth: false,\n  fullScreen: true,\n  TransitionComponent: Fade,\n  TransitionProps: { timeout: 300 },\n  PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: 'blur(2px)' } },\n  'aria-label': 'Lightbox',\n  'aria-labelledby': 'lightbox-title',\n  role: 'dialog',\n  'aria-modal': 'true',\n} as const;\n\nexport const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentProps, ref) => {\n  const props = resolveLightboxProps(componentProps);\n  const { isOpen, items, loop, autoplay, showControls, showCaptions, thumbnails, zoomable } = props;\n  const { className, style, dataTestId } = props;\n\n  const testId = makeTestId(dataTestId);\n  const lightbox = useLightbox(props, ref);\n  const { currentIndex, currentItem, zoom } = lightbox;\n\n  return (\n    <LightboxCopyProvider copy={props.copy}>\n    <Dialog\n      open={isOpen}\n      onClose={lightbox.close}\n      {...DIALOG_STATIC_PROPS}\n      className={className}\n      style={style}\n      onTouchStart={lightbox.handleTouchStart}\n      onTouchEnd={lightbox.handleTouchEnd}\n      data-testid={dataTestId || 'lightbox'}\n    >\n      {/* Visually hidden title for screen readers */}\n      <Typography id=\"lightbox-title\" variant=\"h6\" sx={{ position: 'absolute', left: -10000 }}>\n        Lightbox - {currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`}\n      </Typography>\n\n      <LightboxOverlay\n        testId={testId}\n        itemCount={items.length}\n        currentIndex={currentIndex}\n        showControls={showControls}\n        loop={loop}\n        autoplay={autoplay}\n        canZoom={lightbox.canZoom}\n        isAutoPlaying={lightbox.isAutoPlaying}\n        onClose={lightbox.close}\n        onPrev={lightbox.prev}\n        onNext={lightbox.next}\n        onZoomIn={zoom.zoomIn}\n        onZoomOut={zoom.zoomOut}\n        onResetZoom={zoom.resetZoom}\n        onToggleAutoplay={() => lightbox.setIsAutoPlaying((playing) => !playing)}\n      />\n\n      <LightboxStage\n        items={items}\n        currentItem={currentItem}\n        currentIndex={currentIndex}\n        isLoading={lightbox.isLoading}\n        showCaptions={showCaptions}\n        thumbnails={thumbnails}\n        testId={testId}\n        media={\n          <LightboxCurrentMedia\n            item={currentItem}\n            index={currentIndex}\n            total={items.length}\n            zoomable={zoomable}\n            zoom={zoom}\n            testId={testId}\n            onLoadingChange={lightbox.setIsLoading}\n            onWheel={lightbox.handleWheel}\n          />\n        }\n        thumbnailStrip={\n          thumbnails &&\n          items.length > 1 && (\n            <LightboxThumbnails\n              items={items}\n              currentIndex={currentIndex}\n              testId={testId}\n              onSelect={lightbox.goToIndex}\n            />\n          )\n        }\n      />\n    </Dialog>\n    </LightboxCopyProvider>\n  );\n});\n\nLightbox.displayName = 'Lightbox';\n\nexport default Lightbox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AAEvB,OAAO,WAAW;AA+CZ,SAIA,KAJA;AAlCN,IAAM,sBAAsB;AAAA,EAC1B,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,iBAAiB,EAAE,SAAS,IAAI;AAAA,EAChC,YAAY,EAAE,IAAI,EAAE,YAAY,CAAC,UAAiB,MAAM,OAAO,GAAG,GAAG,gBAAgB,YAAY,EAAE;AAAA,EACnG,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,MAAM;AAAA,EACN,cAAc;AAChB;AAEO,IAAM,WAAW,MAAM,WAAuC,CAAC,gBAAgB,QAAQ;AAC5F,QAAM,QAAQ,qBAAqB,cAAc;AACjD,QAAM,EAAE,QAAQ,OAAO,MAAM,UAAU,cAAc,cAAc,YAAY,SAAS,IAAI;AAC5F,QAAM,EAAE,WAAW,OAAO,WAAW,IAAI;AAEzC,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,WAAW,YAAY,OAAO,GAAG;AACvC,QAAM,EAAE,cAAc,aAAa,KAAK,IAAI;AAE5C,SACE,oBAAC,wBAAqB,MAAM,MAAM,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,SAAS,SAAS;AAAA,MACjB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,cAAc,SAAS;AAAA,MACvB,YAAY,SAAS;AAAA,MACrB,eAAa,cAAc;AAAA,MAG3B;AAAA,6BAAC,cAAW,IAAG,kBAAiB,SAAQ,MAAK,IAAI,EAAE,UAAU,YAAY,MAAM,KAAO,GAAG;AAAA;AAAA,UAC3E,aAAa,OAAO,QAAQ,eAAe,CAAC,OAAO,MAAM,MAAM;AAAA,WAC7E;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,MAAM;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,SAAS;AAAA,YAClB,eAAe,SAAS;AAAA,YACxB,SAAS,SAAS;AAAA,YAClB,QAAQ,SAAS;AAAA,YACjB,QAAQ,SAAS;AAAA,YACjB,UAAU,KAAK;AAAA,YACf,WAAW,KAAK;AAAA,YAChB,aAAa,KAAK;AAAA,YAClB,kBAAkB,MAAM,SAAS,iBAAiB,CAAC,YAAY,CAAC,OAAO;AAAA;AAAA,QACzE;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,SAAS;AAAA,YACpB;AAAA,YACA;AAAA,YACA;AAAA,YACA,OACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,OAAO,MAAM;AAAA,gBACb;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,iBAAiB,SAAS;AAAA,gBAC1B,SAAS,SAAS;AAAA;AAAA,YACpB;AAAA,YAEF,gBACE,cACA,MAAM,SAAS,KACb;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAU,SAAS;AAAA;AAAA,YACrB;AAAA;AAAA,QAGN;AAAA;AAAA;AAAA,EACF,GACA;AAEJ,CAAC;AAED,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":[]}

package/dist/chunk-7BZTZ2WG.js

@@ -0,0 +1,149 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Label/Label.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZES = {
+  xs: (theme) => ({ fontSize: rem(theme, 12), lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
+  sm: (theme) => ({ fontSize: rem(theme, 14), lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
+  md: (theme) => ({ fontSize: rem(theme, 16), lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
+  lg: (theme) => ({ fontSize: rem(theme, 18), lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
+  xl: (theme) => ({ fontSize: rem(theme, 20), lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) })
+};
+var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
+var WEIGHTS = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var fontWeight = (weight) => WEIGHTS[weight] ?? WEIGHTS.regular;
+var textColor = (theme, flags) => {
+  if (flags.error) return theme.palette.error.main;
+  if (flags.disabled) return theme.palette.text.disabled;
+  if (flags.color === "neutral") return theme.palette.text.primary;
+  return accentFor(theme, flags.color).main;
+};
+var rippleStyles = (theme) => ({
+  overflow: "hidden",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: 0,
+    height: 0,
+    borderRadius: "50%",
+    backgroundColor: alpha(theme.palette.primary.main, 0.3),
+    transform: "translate(-50%, -50%)",
+    transition: "width 0.6s, height 0.6s"
+  },
+  "&:active::after": { width: "300%", height: "300%" }
+});
+var SURFACES = {
+  filled: ({ theme, flags, accent }) => ({
+    backgroundColor: alpha(accent, 0.1),
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {}
+  }),
+  outlined: ({ theme, flags, accent }) => ({
+    border: `1px solid ${alpha(accent, 0.5)}`,
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) } : {}
+  }),
+  glass: ({ theme, flags }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(10px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? {
+      backgroundColor: alpha(theme.palette.background.paper, 0.15),
+      borderColor: alpha(theme.palette.primary.main, 0.3)
+    } : {}
+  }),
+  gradient: ({ theme, flags }) => {
+    const accent = accentFor(theme, flags.color === "neutral" ? "primary" : flags.color);
+    const clip = {
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      backgroundClip: "text"
+    };
+    return {
+      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,
+      ...clip,
+      "&:hover": flags.clickable ? {
+        background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,
+        ...clip
+      } : {}
+    };
+  },
+  minimal: ({ theme, flags }) => ({
+    padding: 0,
+    "&:hover": flags.clickable ? { color: theme.palette.primary.main } : {}
+  }),
+  default: () => ({})
+};
+var textLayout = (theme, flags) => {
+  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;
+  return {
+    display: srOnly ? "none" : "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    cursor: clickable ? "pointer" : "default",
+    textAlign: align,
+    fontWeight: fontWeight(weight),
+    textTransform: transform,
+    whiteSpace: nowrap ? "nowrap" : "normal",
+    overflow: truncate ? "hidden" : "visible",
+    textOverflow: truncate ? "ellipsis" : "clip",
+    position: "relative"
+  };
+};
+var labelStyles = (theme, flags) => {
+  const { variant, size, clickable } = flags;
+  const color = textColor(theme, flags);
+  const accent = color || theme.palette.primary.main;
+  return {
+    ...textLayout(theme, flags),
+    ...sizeStyles(theme, size),
+    color,
+    ...flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` },
+    ...flags.pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { opacity: 1 },
+        "50%": { opacity: 0.6 },
+        "100%": { opacity: 1 }
+      }
+    },
+    ...flags.ripple && clickable && rippleStyles(theme),
+    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent })
+  };
+};
+var SR_ONLY_SX = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+export {
+  sizeStyles,
+  textColor,
+  labelStyles,
+  SR_ONLY_SX
+};
+//# sourceMappingURL=chunk-7BZTZ2WG.js.map

package/dist/chunk-7BZTZ2WG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Label/Label.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { LabelProps } from './Label.types';\nimport { accentFor, rem } from '../../../tokens/scales';\n\ntype Size = NonNullable<LabelProps['size']>;\ntype Variant = NonNullable<LabelProps['variant']>;\ntype Weight = NonNullable<LabelProps['weight']>;\n\nconst SIZES: Record<Size, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ fontSize: rem(theme, 12), lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),\n  sm: (theme) => ({ fontSize: rem(theme, 14), lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),\n  md: (theme) => ({ fontSize: rem(theme, 16), lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),\n  lg: (theme) => ({ fontSize: rem(theme, 18), lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),\n  xl: (theme) => ({ fontSize: rem(theme, 20), lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) }),\n};\n\nexport const sizeStyles = (theme: Theme, size: Size): CSSObject => (SIZES[size] ?? SIZES.md)(theme);\n\nconst WEIGHTS: Record<Weight, number> = {\n  light: 300,\n  regular: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\nconst fontWeight = (weight: Weight) => WEIGHTS[weight] ?? WEIGHTS.regular;\n\nexport interface LabelStyleFlags {\n  variant: Variant;\n  size: Size;\n  color: NonNullable<LabelProps['color']>;\n  weight: Weight;\n  transform: NonNullable<LabelProps['transform']>;\n  align: NonNullable<LabelProps['align']>;\n  error: boolean;\n  disabled: boolean;\n  glow: boolean;\n  pulse: boolean;\n  ripple: boolean;\n  srOnly: boolean;\n  nowrap: boolean;\n  truncate: boolean;\n  clickable: boolean;\n}\n\n/**\n * The text colour, which error and disabled override before the palette is\n * consulted at all. Resolved once and threaded through — the variant styles\n * read it up to four times each.\n */\nexport const textColor = (theme: Theme, flags: LabelStyleFlags): string => {\n  if (flags.error) return theme.palette.error.main;\n  if (flags.disabled) return theme.palette.text.disabled;\n  if (flags.color === 'neutral') return theme.palette.text.primary;\n  return accentFor(theme, flags.color).main;\n};\n\n/** The ripple that expands from the centre on press, for clickable labels. */\nconst rippleStyles = (theme: Theme): CSSObject => ({\n  overflow: 'hidden',\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 0,\n    height: 0,\n    borderRadius: '50%',\n    backgroundColor: alpha(theme.palette.primary.main, 0.3),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.6s, height 0.6s',\n  },\n  '&:active::after': { width: '300%', height: '300%' },\n});\n\ninterface SurfaceInput {\n  theme: Theme;\n  flags: LabelStyleFlags;\n  /** The resolved text colour, or the primary accent when it resolves to none. */\n  accent: string;\n}\n\n/**\n * Each variant's own additions. Every arm previously re-spread the same base,\n * glow, pulse and ripple objects and re-derived the colour for each use; the\n * shared prefix is applied once by `labelStyles`.\n *\n * The hover rules are only attached when the label is clickable, which is what\n * the `onClick ? {…} : {}` in every arm was saying.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {\n  filled: ({ theme, flags, accent }) => ({\n    backgroundColor: alpha(accent, 0.1),\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {},\n  }),\n\n  outlined: ({ theme, flags, accent }) => ({\n    border: `1px solid ${alpha(accent, 0.5)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) }\n      : {},\n  }),\n\n  glass: ({ theme, flags }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(10px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? {\n          backgroundColor: alpha(theme.palette.background.paper, 0.15),\n          borderColor: alpha(theme.palette.primary.main, 0.3),\n        }\n      : {},\n  }),\n\n  gradient: ({ theme, flags }) => {\n    // `neutral` has no accent of its own in the gradient; it borrows primary,\n    // which is what this branch already did before the vocabulary was named.\n    const accent = accentFor(theme, flags.color === 'neutral' ? 'primary' : flags.color);\n    // The gradient paints the glyphs themselves rather than the box behind them.\n    const clip = {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      backgroundClip: 'text',\n    };\n\n    return {\n      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,\n      ...clip,\n      '&:hover': flags.clickable\n        ? {\n            background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,\n            ...clip,\n          }\n        : {},\n    };\n  },\n\n  minimal: ({ theme, flags }) => ({\n    padding: 0,\n    '&:hover': flags.clickable ? { color: theme.palette.primary.main } : {},\n  }),\n\n  default: () => ({}),\n};\n\n/** How the text sits: its alignment, weight, casing and overflow behaviour. */\nconst textLayout = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;\n\n  return {\n    display: srOnly ? 'none' : 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    cursor: clickable ? 'pointer' : 'default',\n    textAlign: align,\n    fontWeight: fontWeight(weight),\n    textTransform: transform,\n    whiteSpace: nowrap ? 'nowrap' : 'normal',\n    overflow: truncate ? 'hidden' : 'visible',\n    textOverflow: truncate ? 'ellipsis' : 'clip',\n    position: 'relative' as const,\n  };\n};\n\nexport const labelStyles = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { variant, size, clickable } = flags;\n  const color = textColor(theme, flags);\n  const accent = color || theme.palette.primary.main;\n\n  return {\n    ...textLayout(theme, flags),\n    ...sizeStyles(theme, size),\n    color,\n    ...(flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` }),\n    ...(flags.pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { opacity: 1 },\n        '50%': { opacity: 0.6 },\n        '100%': { opacity: 1 },\n      },\n    }),\n    ...(flags.ripple && clickable && rippleStyles(theme)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent }),\n  };\n};\n\n/** Visually hidden but still read aloud, for the `srOnly` label. */\nexport const SR_ONLY_SX: CSSObject = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-7D7CJRL7.js

@@ -0,0 +1,78 @@
+import {
+  isPresetActive,
+  resolvePreset
+} from "./chunk-CBOB5AV6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-preset-chips.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx } from "react/jsx-runtime";
+function PresetChip({
+  preset,
+  active,
+  onSelect,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      onClick: onSelect,
+      "aria-pressed": active,
+      "data-testid": testId,
+      sx: {
+        px: 1.25,
+        py: 0.5,
+        border: 1,
+        borderStyle: "solid",
+        borderColor: active ? "primary.main" : "divider",
+        borderRadius: 999,
+        bgcolor: active ? "action.selected" : "background.paper",
+        color: active ? "primary.main" : "text.secondary",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: sxRem(12),
+        fontWeight: 600,
+        whiteSpace: "nowrap",
+        "&:hover": { borderColor: active ? "primary.main" : "text.primary" }
+      },
+      children: preset.label
+    }
+  );
+}
+function RangePresets({
+  presets,
+  value,
+  onChange,
+  testId
+}) {
+  if (presets.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": `${testId}-presets`,
+      sx: { display: "flex", flexWrap: "wrap", gap: 0.75 },
+      children: presets.map((preset) => {
+        const active = isPresetActive(preset, value);
+        return /* @__PURE__ */ jsx(
+          PresetChip,
+          {
+            preset,
+            active,
+            onSelect: () => onChange(active ? {} : resolvePreset(preset)),
+            testId: `${testId}-preset-${preset.id}`
+          },
+          preset.id
+        );
+      })
+    }
+  );
+}
+
+export {
+  RangePresets
+};
+//# sourceMappingURL=chunk-7D7CJRL7.js.map

package/dist/chunk-7D7CJRL7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-preset-chips.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE ONE-CLICK WINDOWS ABOVE A RANGE'S `De`/`Até` INPUTS.\n *\n * \"Filter by last month\" is two date pickers, four gestures and a mental\n * calculation of which day the month ended on. It is also the overwhelmingly\n * common case. So the common windows get a chip each, and the inputs stay for\n * the windows nobody could enumerate.\n *\n * Clicking an active preset CLEARS it. A chip that reads as pressed and does\n * nothing when pressed again is a dead control, and the alternative — hunting\n * for the pill's ✕ — is the gesture this row exists to remove.\n */\nimport Box from \"@mui/material/Box/index.js\";\n\nimport { isPresetActive, resolvePreset } from \"./data-views-range-presets\";\nimport type { RangePreset, RangeValue } from \"./data-views-types\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/** One preset, styled as the same pill-shaped chip the filter bar uses. */\nfunction PresetChip({\n  preset,\n  active,\n  onSelect,\n  testId,\n}: {\n  preset: RangePreset;\n  active: boolean;\n  onSelect: () => void;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onSelect}\n      aria-pressed={active}\n      data-testid={testId}\n      sx={{\n        px: 1.25,\n        py: 0.5,\n        border: 1,\n        borderStyle: \"solid\",\n        borderColor: active ? \"primary.main\" : \"divider\",\n        borderRadius: 999,\n        bgcolor: active ? \"action.selected\" : \"background.paper\",\n        color: active ? \"primary.main\" : \"text.secondary\",\n        cursor: \"pointer\",\n        font: \"inherit\",\n        fontSize: sxRem(12),\n        fontWeight: 600,\n        whiteSpace: \"nowrap\",\n        \"&:hover\": { borderColor: active ? \"primary.main\" : \"text.primary\" },\n      }}\n    >\n      {preset.label}\n    </Box>\n  );\n}\n\n/**\n * The preset row. Renders nothing when a field declares none, so a numeric\n * range without host-configured windows keeps the popover it had.\n *\n * Carries no outer margin — the three surfaces that host it (the pill's\n * popover, the slide-in panel, the \"Mais\" overflow) each sit it in a different\n * stack, and a baked-in margin would be wrong in two of them.\n */\nexport function RangePresets({\n  presets,\n  value,\n  onChange,\n  testId,\n}: {\n  presets: RangePreset[];\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element | null {\n  if (presets.length === 0) return null;\n  return (\n    <Box\n      data-testid={`${testId}-presets`}\n      sx={{ display: \"flex\", flexWrap: \"wrap\", gap: 0.75 }}\n    >\n      {presets.map((preset) => {\n        const active = isPresetActive(preset, value);\n        return (\n          <PresetChip\n            key={preset.id}\n            preset={preset}\n            active={active}\n            onSelect={() => onChange(active ? {} : resolvePreset(preset))}\n            testId={`${testId}-preset-${preset.id}`}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,OAAO,SAAS;AAmBZ;AAZJ,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAS;AAAA,MACT,gBAAc;AAAA,MACd,eAAa;AAAA,MACb,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,aAAa,SAAS,iBAAiB;AAAA,QACvC,cAAc;AAAA,QACd,SAAS,SAAS,oBAAoB;AAAA,QACtC,OAAO,SAAS,iBAAiB;AAAA,QACjC,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU,MAAM,EAAE;AAAA,QAClB,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,WAAW,EAAE,aAAa,SAAS,iBAAiB,eAAe;AAAA,MACrE;AAAA,MAEC,iBAAO;AAAA;AAAA,EACV;AAEJ;AAUO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK6B;AAC3B,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,MAAM;AAAA,MACtB,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,KAAK,KAAK;AAAA,MAElD,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,SAAS,eAAe,QAAQ,KAAK;AAC3C,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA,UAAU,MAAM,SAAS,SAAS,CAAC,IAAI,cAAc,MAAM,CAAC;AAAA,YAC5D,QAAQ,GAAG,MAAM,WAAW,OAAO,EAAE;AAAA;AAAA,UAJhC,OAAO;AAAA,QAKd;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-7DN4UXJ3.js

@@ -0,0 +1,76 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Menubar/Menubar.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZES = {
+  xs: (theme) => ({ minHeight: 40, fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),
+  sm: (theme) => ({ minHeight: 48, fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),
+  md: (theme) => ({ minHeight: 56, fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),
+  lg: (theme) => ({ minHeight: 64, fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),
+  xl: (theme) => ({ minHeight: 72, fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) })
+};
+var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
+var accentOf = (theme, color) => color === "neutral" ? theme.palette.primary.main : accentFor(theme, color).main;
+var colorStyles = (theme, color, transparent) => {
+  const surface = color === "neutral" ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary } : { backgroundColor: accentFor(theme, color).main, color: accentFor(theme, color).contrastText };
+  return transparent ? { ...surface, backgroundColor: "transparent" } : surface;
+};
+var SURFACES = {
+  glass: (theme, { glass }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
+    backdropFilter: "blur(20px)",
+    borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`
+  }),
+  gradient: (theme, { color, gradient }) => {
+    const accent = accentFor(theme, color === "neutral" ? "primary" : color);
+    return {
+      background: gradient ? `linear-gradient(135deg, ${accent.light}, ${accent.dark})` : accent.main,
+      color: accent.contrastText
+    };
+  },
+  elevated: (theme, { blur, elevation }) => ({
+    ...blur && { backdropFilter: "blur(10px)" },
+    boxShadow: theme.shadows[elevation]
+  }),
+  minimal: (_theme, { blur }) => ({
+    ...blur && { backdropFilter: "blur(10px)" },
+    boxShadow: "none",
+    borderBottom: "none"
+  }),
+  bordered: (theme, { blur, color }) => ({
+    ...blur && { backdropFilter: "blur(10px)" },
+    borderBottom: `2px solid ${color === "neutral" ? theme.palette.divider : accentFor(theme, color).main}`
+  }),
+  default: (_theme, { blur }) => ({ ...blur && { backdropFilter: "blur(10px)" } })
+};
+var barStyles = (theme, flags) => {
+  const { variant, size, color, glow, pulse, transparent } = flags;
+  return {
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    ...sizeStyles(theme, size),
+    ...colorStyles(theme, color, transparent),
+    ...glow && { boxShadow: `0 0 20px ${alpha(accentOf(theme, color), 0.4)}` },
+    ...pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { opacity: 1 },
+        "50%": { opacity: 0.8 },
+        "100%": { opacity: 1 }
+      }
+    },
+    ...(SURFACES[variant] ?? SURFACES.default)(theme, flags)
+  };
+};
+
+export {
+  sizeStyles,
+  barStyles
+};
+//# sourceMappingURL=chunk-7DN4UXJ3.js.map

package/dist/chunk-7DN4UXJ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Menubar/Menubar.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { MenubarProps } from './Menubar.types';\nimport { accentFor, rem } from '../../../tokens/scales';\n\ntype Size = NonNullable<MenubarProps['size']>;\ntype Variant = NonNullable<MenubarProps['variant']>;\ntype Color = NonNullable<MenubarProps['color']>;\n\nconst SIZES: Record<Size, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ minHeight: 40, fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),\n  sm: (theme) => ({ minHeight: 48, fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),\n  md: (theme) => ({ minHeight: 56, fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),\n  lg: (theme) => ({ minHeight: 64, fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),\n  xl: (theme) => ({ minHeight: 72, fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) }),\n};\n\nexport const sizeStyles = (theme: Theme, size: Size): CSSObject =>\n  (SIZES[size] ?? SIZES.md)(theme);\n\n/** `default` is not a palette entry — it means the paper surface and its text. */\nconst accentOf = (theme: Theme, color: Color) =>\n  color === 'neutral' ? theme.palette.primary.main : accentFor(theme, color).main;\n\nconst colorStyles = (theme: Theme, color: Color, transparent: boolean): CSSObject => {\n  const surface =\n    color === 'neutral'\n      ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }\n      : { backgroundColor: accentFor(theme, color).main, color: accentFor(theme, color).contrastText };\n\n  return transparent ? { ...surface, backgroundColor: 'transparent' } : surface;\n};\n\ninterface MenubarStyleFlags {\n  variant: Variant;\n  size: Size;\n  color: Color;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  blur: boolean;\n  transparent: boolean;\n  elevation: number;\n}\n\n/**\n * Each variant's own additions to the shared bar. The `glass` and `gradient`\n * arms deliberately do not take the blur spread: glass sets its own\n * backdropFilter, and a blurred gradient loses the gradient.\n */\nconst SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSObject> = {\n  glass: (theme, { glass }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),\n    backdropFilter: 'blur(20px)',\n    borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n  }),\n\n  gradient: (theme, { color, gradient }) => {\n    // `neutral` borrows primary for the gradient, as this branch always did.\n    const accent = accentFor(theme, color === 'neutral' ? 'primary' : color);\n    return {\n      background: gradient\n        ? `linear-gradient(135deg, ${accent.light}, ${accent.dark})`\n        : accent.main,\n      color: accent.contrastText,\n    };\n  },\n\n  elevated: (theme, { blur, elevation }) => ({\n    ...(blur && { backdropFilter: 'blur(10px)' }),\n    boxShadow: theme.shadows[elevation],\n  }),\n\n  minimal: (_theme, { blur }) => ({\n    ...(blur && { backdropFilter: 'blur(10px)' }),\n    boxShadow: 'none',\n    borderBottom: 'none',\n  }),\n\n  bordered: (theme, { blur, color }) => ({\n    ...(blur && { backdropFilter: 'blur(10px)' }),\n    borderBottom: `2px solid ${\n      color === 'neutral' ? theme.palette.divider : accentFor(theme, color).main\n    }`,\n  }),\n\n  default: (_theme, { blur }) => ({ ...(blur && { backdropFilter: 'blur(10px)' }) }),\n};\n\nexport const barStyles = (theme: Theme, flags: MenubarStyleFlags): CSSObject => {\n  const { variant, size, color, glow, pulse, transparent } = flags;\n\n  return {\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    ...sizeStyles(theme, size),\n    ...colorStyles(theme, color, transparent),\n    ...(glow && { boxShadow: `0 0 20px ${alpha(accentOf(theme, color), 0.4)}` }),\n    ...(pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { opacity: 1 },\n        '50%': { opacity: 0.8 },\n        '100%': { opacity: 1 },\n      },\n    }),\n    ...(SURFACES[variant] ?? SURFACES.default)(theme, flags),\n  };\n};\n"],"mappings":"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","names":[]}