@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-NM3E27GK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.views.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactElement } from 'react';\nimport React from 'react';\n\nimport type { TimingData } from './TimingDiagram.types';\n\n// Color configurations\nexport const phaseColors = {\n  dns: '#9C27B0', // Purple\n  connect: '#2196F3', // Blue\n  ssl: '#00BCD4', // Cyan\n  request: '#4CAF50', // Green\n  response: '#FF9800', // Orange\n};\n\nexport type PhaseKey = keyof typeof phaseColors;\n\nexport interface Phase {\n  key: string;\n  label: string;\n  value?: number;\n}\n\nexport interface TimingViewProps {\n  phases: Phase[];\n  percentages: Record<string, number>;\n  data: TimingData;\n  animated: boolean;\n  showLabels: boolean;\n  showTooltips: boolean;\n  height: number;\n}\n\nexport const formatTime = (ms: number): string => {\n  if (ms < 1000) return `${ms}ms`;\n  return `${(ms / 1000).toFixed(2)}s`;\n};\n\nconst colorOf = (phase: Phase): string => phaseColors[phase.key as PhaseKey];\nconst widthOf = (percentages: Record<string, number>, phase: Phase): number =>\n  percentages[phase.key] ?? 0;\n\n// Waterfall and stacked both offer the same hover explanation of a segment; only\n// whether tooltips are on at all varies.\nconst withTooltip = (\n  phase: Phase,\n  enabled: boolean,\n  element: ReactElement,\n): ReactElement =>\n  enabled ? (\n    <Tooltip\n      key={phase.key}\n      title={`${phase.label}: ${formatTime(phase.value!)}`}\n      placement=\"top\"\n      role=\"tooltip\"\n      aria-describedby={`tooltip-${phase.key}`}\n    >\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n\nconst WaterfallContainer = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  width: '100%',\n  marginTop: theme.spacing(2),\n}));\n\nconst WaterfallBar = styled(Box, {\n  shouldForwardProp: (prop) =>\n    !['phaseColor', 'offset', 'width', 'animated'].includes(prop as string),\n})<{\n  phaseColor: string;\n  offset: number;\n  width: number;\n  animated: boolean;\n}>(({ theme, phaseColor, offset, width, animated }) => ({\n  position: 'absolute',\n  height: 32,\n  left: `${offset}%`,\n  width: `${width}%`,\n  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,\n  borderRadius: theme.shape.borderRadius,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: theme.palette.getContrastText(phaseColor),\n  fontSize: '0.75rem',\n  fontWeight: 500,\n  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,\n  transition: animated ? 'all 0.5s ease' : 'none',\n  animation: animated ? 'slideIn 0.5s ease' : 'none',\n  '@keyframes slideIn': {\n    from: {\n      transform: 'translateX(-20px)',\n      opacity: 0,\n    },\n    to: {\n      transform: 'translateX(0)',\n      opacity: 1,\n    },\n  },\n  '&:hover': {\n    transform: 'translateY(-2px)',\n    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,\n    zIndex: 10,\n  },\n}));\n\nconst TimelineAxis = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n  marginTop: theme.spacing(1),\n  paddingTop: theme.spacing(1),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst TimeLabel = styled(Typography)(({ theme }) => ({\n  fontSize: '0.7rem',\n  color: theme.palette.text.secondary,\n  fontWeight: 500,\n}));\n\nexport const WaterfallView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n  showLabels,\n  showTooltips,\n  height,\n}) => {\n  // Each bar starts where the previous one ended, so the row reads as a timeline.\n  let offset = 0;\n\n  return (\n    <WaterfallContainer style={{ height: height + 40 }} data-variant=\"waterfall\">\n      {phases.map((phase, index) => {\n        const width = widthOf(percentages, phase);\n        const currentOffset = offset;\n        offset += width;\n\n        return withTooltip(\n          phase,\n          showTooltips,\n          <WaterfallBar\n            key={phase.key}\n            data-testid={`timing-segment-${phase.key}`}\n            phaseColor={colorOf(phase)}\n            offset={currentOffset}\n            width={width}\n            animated={animated}\n            data-animated={animated.toString()}\n            style={{\n              top: index * 8,\n              width: `${width}%`,\n              left: `${currentOffset}%`,\n            }}\n          >\n            {showLabels && width > 10 && (\n              <span data-testid=\"timing-label\">{formatTime(phase.value!)}</span>\n            )}\n          </WaterfallBar>,\n        );\n      })}\n      <TimelineAxis style={{ marginTop: height }}>\n        <TimeLabel>0ms</TimeLabel>\n        <TimeLabel>{formatTime(data.total / 2)}</TimeLabel>\n        <TimeLabel>{formatTime(data.total)}</TimeLabel>\n      </TimelineAxis>\n    </WaterfallContainer>\n  );\n};\n\nconst StackedBar = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'animated',\n})<{ animated: boolean }>(({ theme, animated }) => ({\n  display: 'flex',\n  width: '100%',\n  height: 40,\n  borderRadius: theme.shape.borderRadius,\n  overflow: 'hidden',\n  boxShadow: theme.shadows[2],\n  ...(animated && {\n    '& > div': {\n      animation: 'expandWidth 0.8s ease',\n    },\n    '@keyframes expandWidth': {\n      from: { width: 0 },\n      to: { width: '100%' },\n    },\n  }),\n}));\n\nconst StackedSegment = styled(Box, {\n  shouldForwardProp: (prop) => !['phaseColor', 'width'].includes(prop as string),\n})<{ phaseColor: string; width: number }>(({ phaseColor, width }) => ({\n  width: `${width}%`,\n  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '#fff',\n  fontSize: '0.7rem',\n  fontWeight: 600,\n  position: 'relative',\n  transition: 'all 0.3s ease',\n  '&:hover': {\n    filter: 'brightness(1.1)',\n    zIndex: 1,\n  },\n}));\n\nexport const StackedView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n  showLabels,\n  showTooltips,\n}) => (\n  <Box data-variant=\"stacked\">\n    <StackedBar animated={animated} data-animated={animated.toString()}>\n      {phases.map((phase) => {\n        const width = widthOf(percentages, phase);\n\n        return withTooltip(\n          phase,\n          showTooltips,\n          <StackedSegment\n            key={phase.key}\n            data-testid={`timing-segment-${phase.key}`}\n            phaseColor={colorOf(phase)}\n            width={width}\n            style={{ width: `${width}%` }}\n          >\n            {showLabels && width > 10 && (\n              <span data-testid=\"timing-label\">{formatTime(phase.value!)}</span>\n            )}\n          </StackedSegment>,\n        );\n      })}\n    </StackedBar>\n    <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        0ms\n      </Typography>\n      <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"bold\">\n        Total: {formatTime(data.total)}\n      </Typography>\n    </Box>\n  </Box>\n);\n\nconst HorizontalBar = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(2),\n}));\n\nconst HorizontalSegment = styled(Box, {\n  shouldForwardProp: (prop) => !['phaseColor', 'width', 'animated'].includes(prop as string),\n})<{\n  phaseColor: string;\n  width: number;\n  animated: boolean;\n}>(({ theme, phaseColor, animated }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n  '& .label': {\n    minWidth: 80,\n    fontSize: '0.85rem',\n    fontWeight: 500,\n    color: theme.palette.text.secondary,\n  },\n  '& .bar': {\n    flex: 1,\n    height: 24,\n    borderRadius: theme.shape.borderRadius,\n    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,\n    position: 'relative',\n    overflow: 'hidden',\n    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,\n    ...(animated && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        background: `linear-gradient(90deg, transparent 0%, ${alpha('#fff', 0.3)} 50%, transparent 100%)`,\n        animation: 'shimmer 2s infinite',\n      },\n      '@keyframes shimmer': {\n        from: { transform: 'translateX(-100%)' },\n        to: { transform: 'translateX(100%)' },\n      },\n    }),\n  },\n  '& .value': {\n    minWidth: 60,\n    textAlign: 'right',\n    fontSize: '0.85rem',\n    fontWeight: 600,\n    color: phaseColor,\n  },\n}));\n\nexport const HorizontalView: FC<TimingViewProps> = ({\n  phases,\n  percentages,\n  data,\n  animated,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <HorizontalBar data-variant=\"horizontal\">\n      {phases.map((phase) => (\n        <HorizontalSegment\n          key={phase.key}\n          data-testid={`timing-segment-${phase.key}`}\n          phaseColor={colorOf(phase)}\n          width={widthOf(percentages, phase)}\n          animated={animated}\n          data-animated={animated.toString()}\n        >\n          <Typography className=\"label\">{phase.label}</Typography>\n          <Box className=\"bar\" style={{ width: `${percentages[phase.key]}%` }} />\n          <Typography className=\"value\" data-testid=\"timing-label\">\n            {formatTime(phase.value!)}\n          </Typography>\n        </HorizontalSegment>\n      ))}\n      <Box sx={{ mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }}>\n        <Typography variant=\"body2\" fontWeight=\"bold\" color=\"primary\">\n          Total Time: {formatTime(data.total)}\n        </Typography>\n      </Box>\n    </HorizontalBar>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-NPEKJXVV.js

@@ -0,0 +1,155 @@
+import {
+  CarouselChrome
+} from "./chunk-5QXSPLWU.js";
+import {
+  containerStyles
+} from "./chunk-Z56IO7OV.js";
+import {
+  CarouselTrack
+} from "./chunk-WIXUMFU7.js";
+import {
+  useCarouselNavigation
+} from "./chunk-RUIV5TVA.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+import {
+  muiColor
+} from "./chunk-I6PZVHIT.js";
+
+// src/components/data-display/Carousel/Carousel.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Slide from "@mui/material/Slide/index.js";
+import Zoom from "@mui/material/Zoom/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "primary",
+  autoPlay: false,
+  autoPlayInterval: 3e3,
+  loop: true,
+  showIndicators: true,
+  showArrows: true,
+  showThumbnails: false,
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  height: 400,
+  width: "100%",
+  pauseOnHover: true,
+  indicatorPosition: "bottom",
+  arrowPosition: "overlay",
+  animation: "slide"
+};
+var TRANSITIONS = { fade: Fade, zoom: Zoom, flip: Slide, slide: Slide };
+var Carousel = (props) => {
+  const resolved = withDefaults(props, DEFAULTS);
+  const {
+    items,
+    variant,
+    size,
+    color,
+    autoPlay,
+    autoPlayInterval,
+    loop,
+    loading,
+    disabled,
+    className,
+    style,
+    height,
+    width,
+    pauseOnHover,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    animation,
+    glow,
+    pulse,
+    glass,
+    gradient
+  } = resolved;
+  const theme = useTheme();
+  const containerRef = useRef(null);
+  const { activeIndex, handleNext, handlePrev, handleSelect, hoverProps } = useCarouselNavigation({
+    count: items.length,
+    loop,
+    autoPlay,
+    autoPlayInterval,
+    pauseOnHover,
+    disabled,
+    onChange
+  });
+  const handleItemClick = useCallback(
+    (item, index) => {
+      if (!disabled) {
+        onClick?.(item, index);
+      }
+    },
+    [disabled, onClick]
+  );
+  const frameSx = containerStyles({
+    theme,
+    variant,
+    size,
+    color,
+    height,
+    width,
+    glow,
+    pulse,
+    glass,
+    gradient
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsx(Box, { sx: { ...frameSx, display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { color: muiColor(color, "inherit") }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: containerRef,
+      className,
+      "data-testid": "carousel-container",
+      sx: { ...frameSx, ...style },
+      onFocus,
+      onBlur,
+      ...hoverProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          CarouselTrack,
+          {
+            items,
+            activeIndex,
+            variant,
+            animation,
+            transition: TRANSITIONS[animation] ?? Slide,
+            clickable: Boolean(onClick),
+            onSelect: handleItemClick
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CarouselChrome,
+          {
+            ...resolved,
+            activeIndex,
+            onPrev: handlePrev,
+            onNext: handleNext,
+            onSelect: handleSelect
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Carousel
+};
+//# sourceMappingURL=chunk-NPEKJXVV.js.map

package/dist/chunk-NPEKJXVV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Zoom from '@mui/material/Zoom/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useCallback, useRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { useCarouselNavigation } from './Carousel.hooks';\nimport { CarouselChrome } from './Carousel.chrome';\nimport { CarouselTrack } from './Carousel.slide';\nimport { containerStyles } from './Carousel.styles';\nimport type { CarouselItem, CarouselProps } from './Carousel.types';\nimport { muiColor } from '../../../tokens/scales';\n\nexport { CarouselArrows, CarouselIndicators, CarouselThumbnails } from './Carousel.parts';\n\nconst DEFAULTS = {\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  autoPlay: false,\n  autoPlayInterval: 3000,\n  loop: true,\n  showIndicators: true,\n  showArrows: true,\n  showThumbnails: false,\n  glow: false,\n  pulse: false,\n  glass: false,\n  gradient: false,\n  loading: false,\n  disabled: false,\n  height: 400,\n  width: '100%',\n  pauseOnHover: true,\n  indicatorPosition: 'bottom',\n  arrowPosition: 'overlay',\n  animation: 'slide',\n} satisfies Partial<CarouselProps>;\n\ntype ResolvedCarouselProps = CarouselProps & Required<Pick<CarouselProps, keyof typeof DEFAULTS>>;\n\n/**\n * `flip` reuses Slide with a fixed direction — MUI has no flip transition, and a\n * slide from one side reads closer to a flip than a fade does.\n */\nconst TRANSITIONS = { fade: Fade, zoom: Zoom, flip: Slide, slide: Slide } as const;\n\nexport const Carousel: React.FC<CarouselProps> = (props) => {\n  const resolved = withDefaults(props, DEFAULTS) as ResolvedCarouselProps;\n  const {\n    items, variant, size, color, autoPlay, autoPlayInterval, loop, loading, disabled,\n    className, style, height, width, pauseOnHover, onClick, onChange, onFocus, onBlur,\n    animation, glow, pulse, glass, gradient,\n  } = resolved;\n\n  const theme = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const { activeIndex, handleNext, handlePrev, handleSelect, hoverProps } = useCarouselNavigation({\n    count: items.length,\n    loop,\n    autoPlay,\n    autoPlayInterval,\n    pauseOnHover,\n    disabled,\n    onChange,\n  });\n\n  const handleItemClick = useCallback(\n    (item: CarouselItem, index: number) => {\n      if (!disabled) {\n        onClick?.(item, index);\n      }\n    },\n    [disabled, onClick],\n  );\n\n  const frameSx = containerStyles({\n    theme, variant, size, color, height, width, glow, pulse, glass, gradient,\n  });\n\n  if (loading) {\n    return (\n      <Box sx={{ ...frameSx, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>\n        <CircularProgress color={muiColor(color, 'inherit')} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      ref={containerRef}\n      className={className}\n      data-testid=\"carousel-container\"\n      sx={{ ...frameSx, ...style }}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      {...hoverProps}\n    >\n      <CarouselTrack\n        items={items}\n        activeIndex={activeIndex}\n        variant={variant}\n        animation={animation}\n        transition={TRANSITIONS[animation] ?? Slide}\n        clickable={Boolean(onClick)}\n        onSelect={handleItemClick}\n      />\n\n      <CarouselChrome\n        {...resolved}\n        activeIndex={activeIndex}\n        onPrev={handlePrev}\n        onNext={handleNext}\n        onSelect={handleSelect}\n      />\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAgB,aAAa,cAAc;AAkFnC,cAMJ,YANI;AArER,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,WAAW;AACb;AAQA,IAAM,cAAc,EAAE,MAAM,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM;AAEjE,IAAM,WAAoC,CAAC,UAAU;AAC1D,QAAM,WAAW,aAAa,OAAO,QAAQ;AAC7C,QAAM;AAAA,IACJ;AAAA,IAAO;AAAA,IAAS;AAAA,IAAM;AAAA,IAAO;AAAA,IAAU;AAAA,IAAkB;AAAA,IAAM;AAAA,IAAS;AAAA,IACxE;AAAA,IAAW;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAc;AAAA,IAAS;AAAA,IAAU;AAAA,IAAS;AAAA,IAC3E;AAAA,IAAW;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,EACjC,IAAI;AAEJ,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,EAAE,aAAa,YAAY,YAAY,cAAc,WAAW,IAAI,sBAAsB;AAAA,IAC9F,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAoB,UAAkB;AACrC,UAAI,CAAC,UAAU;AACb,kBAAU,MAAM,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AAEA,QAAM,UAAU,gBAAgB;AAAA,IAC9B;AAAA,IAAO;AAAA,IAAS;AAAA,IAAM;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,EAClE,CAAC;AAED,MAAI,SAAS;AACX,WACE,oBAAC,OAAI,IAAI,EAAE,GAAG,SAAS,SAAS,QAAQ,gBAAgB,UAAU,YAAY,SAAS,GACrF,8BAAC,oBAAiB,OAAO,SAAS,OAAO,SAAS,GAAG,GACvD;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAY;AAAA,MACZ,IAAI,EAAE,GAAG,SAAS,GAAG,MAAM;AAAA,MAC3B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,YAAY,SAAS,KAAK;AAAA,YACtC,WAAW,QAAQ,OAAO;AAAA,YAC1B,UAAU;AAAA;AAAA,QACZ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-NQCYVYP3.js

@@ -0,0 +1,173 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-6HLRXICF.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/components/data-display/DataViews/data-views-export.tsx
+import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ALL_FORMATS = ["xlsx", "csv", "json"];
+function scopeLabel(selected, total) {
+  if (selected > 0) {
+    return `${selected} ${selected === 1 ? "item selecionado" : "itens selecionados"}`;
+  }
+  return `${total} ${total === 1 ? "item filtrado" : "itens filtrados"}`;
+}
+function ExportTrigger({
+  busy,
+  onOpen,
+  testIdPrefix,
+  compact
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      color: "neutral",
+      disabled: busy,
+      onClick: (event) => onOpen(event.currentTarget),
+      dataTestId: `${testIdPrefix}-export-trigger`,
+      "aria-label": copy.export.trigger,
+      title: compact ? copy.export.trigger : void 0,
+      children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+        busy ? /* @__PURE__ */ jsx(CircularProgress, { size: 14 }) : /* @__PURE__ */ jsx(DownloadRoundedIcon, { fontSize: "small" }),
+        !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.export.triggerLabel }),
+        !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+      ] })
+    }
+  );
+}
+function FormatRow({
+  format,
+  onPick,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick: onPick,
+      "data-testid": `${testIdPrefix}-export-${format}`,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        width: "100%",
+        px: 1.5,
+        py: 1,
+        border: 0,
+        background: "none",
+        cursor: "pointer",
+        font: "inherit",
+        textAlign: "left",
+        "&:hover": { bgcolor: "action.hover" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontSize: "0.8125rem" }, children: copy.export.formats[format]?.label ?? format }),
+        /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontSize: "0.6875rem", color: "text.disabled" }, children: copy.export.formats[format]?.hint ?? "" })
+      ]
+    }
+  );
+}
+function ExportPanel({
+  formats,
+  selectedCount,
+  totalCount,
+  columnCount,
+  onPick,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default2, { "data-testid": `${testIdPrefix}-export-panel`, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { px: 1.5, pt: 1, pb: 1, borderBottom: 1, borderColor: "divider" }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsxs(default2, { component: "span", "data-testid": `${testIdPrefix}-export-scope`, children: [
+        "Exportando ",
+        scopeLabel(selectedCount, totalCount)
+      ] }) }),
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "text.disabled" }, children: copy.export.visibleColumns(columnCount) }) })
+    ] }),
+    formats.map((format) => /* @__PURE__ */ jsx(
+      FormatRow,
+      {
+        format,
+        onPick: () => onPick(format),
+        testIdPrefix
+      },
+      format
+    ))
+  ] });
+}
+function DataViewsExportMenu({
+  config,
+  query,
+  totalCount,
+  selectedIds,
+  columns,
+  testIdPrefix,
+  compact
+}) {
+  const [anchor, setAnchor] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const run = async (format) => {
+    setAnchor(null);
+    setBusy(true);
+    try {
+      await config.onExport({
+        format,
+        // UNPAGINATED: page 1 of a page as large as the whole result. The host
+        // re-queries with this; nothing here reads the loaded rows.
+        query: { ...query, page: 1, pageSize: Math.max(1, totalCount) },
+        selectedIds: selectedIds.length > 0 ? [...selectedIds] : void 0,
+        columns
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ExportTrigger, { busy, onOpen: setAnchor, testIdPrefix, compact }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: () => setAnchor(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { width: 260, maxWidth: "calc(100vw - 32px)" } } },
+        children: /* @__PURE__ */ jsx(
+          ExportPanel,
+          {
+            formats: config.formats ?? ALL_FORMATS,
+            selectedCount: selectedIds.length,
+            totalCount,
+            columnCount: columns.length,
+            onPick: (format) => void run(format),
+            testIdPrefix
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  DataViewsExportMenu
+};
+//# sourceMappingURL=chunk-NQCYVYP3.js.map

package/dist/chunk-NQCYVYP3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-export.tsx"],"sourcesContent":["\"use client\";\n\nimport DownloadRoundedIcon from \"@mui/icons-material/DownloadRounded\";\nimport KeyboardArrowDownRoundedIcon from \"@mui/icons-material/KeyboardArrowDownRounded\";\nimport CircularProgress from \"@mui/material/CircularProgress/index.js\";\nimport Popover from \"@mui/material/Popover/index.js\";\nimport { useState } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport type { DataViewQuery } from \"./data-views-types\";\n\n/**\n * EXPORT — the current QUERY, never the rendered page.\n *\n * Exporting what happens to be on screen is the single most common bug in an\n * admin table: the operator filtered 214 records, sees 25, exports, and gets\n * 25 — with nothing anywhere saying so. So this control does not touch the\n * loaded rows at all. It hands the host the same `DataViewQuery` the grid is\n * showing, unpaginated, and the HOST re-queries the backend — the same\n * division as everywhere else here: the component emits, the host fetches.\n *\n * The menu states the number it is about to export before the click, so the\n * two possible answers (the selection, or the whole filtered set) are never a\n * guess.\n */\n\n/** What a host can be asked to produce. */\nexport type DataViewExportFormat = \"xlsx\" | \"csv\" | \"json\";\n\n/** The request handed to the host when the operator picks a format. */\nexport interface DataViewExportRequest {\n  format: DataViewExportFormat;\n  /**\n   * The live query with `page: 1` and `pageSize` set to the whole matched\n   * total — i.e. \"everything this filter selects\", not this page.\n   */\n  query: DataViewQuery;\n  /**\n   * The selected row ids, when the operator has a selection. The host filters\n   * the re-queried rows to these; absent means the whole filtered set.\n   */\n  selectedIds?: Array<string | number>;\n  /** The visible columns, in the operator's current order. */\n  columns: { id: string; label: string }[];\n}\n\n/** Injected export. Absent ⇒ no Exportar control, exactly like `renderCard`. */\nexport interface DataViewExport {\n  /** Runs the export. Awaited, so the trigger can show it is working. */\n  onExport: (request: DataViewExportRequest) => Promise<void> | void;\n  /** Formats to offer, in menu order. Defaults to all three. */\n  formats?: DataViewExportFormat[];\n}\n\n/** One line per format: what it is, and when to reach for it. */\n\nconst ALL_FORMATS: DataViewExportFormat[] = [\"xlsx\", \"csv\", \"json\"];\n\ninterface ExportMenuProps {\n  config: DataViewExport;\n  /** The live query — copied and unpaginated before it reaches the host. */\n  query: DataViewQuery;\n  /** The unpaginated total, so the label can state what \"tudo\" means. */\n  totalCount: number;\n  selectedIds: Array<string | number>;\n  columns: { id: string; label: string }[];\n  testIdPrefix: string;\n  /** Render icon-only (measured upstream). */\n  compact?: boolean;\n}\n\n/** \"Exportando 214 itens filtrados\" / \"3 itens selecionados\" — never a guess. */\nfunction scopeLabel(selected: number, total: number): string {\n  if (selected > 0) {\n    return `${selected} ${selected === 1 ? \"item selecionado\" : \"itens selecionados\"}`;\n  }\n  return `${total} ${total === 1 ? \"item filtrado\" : \"itens filtrados\"}`;\n}\n\n/** The trigger. Shows a spinner while the host's export is still running. */\nfunction ExportTrigger({\n  busy,\n  onOpen,\n  testIdPrefix,\n  compact,\n}: {\n  busy: boolean;\n  onOpen: (anchor: HTMLElement) => void;\n  testIdPrefix: string;\n  /** Icon only — step 2 of the toolbar's degradation ladder. */\n  compact?: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"sm\"\n      color=\"neutral\"\n      disabled={busy}\n      onClick={(event) => onOpen(event.currentTarget as HTMLElement)}\n      dataTestId={`${testIdPrefix}-export-trigger`}\n      aria-label={copy.export.trigger}\n      // The label is gone, so the tooltip is the only thing naming the control.\n      title={compact ? copy.export.trigger : undefined}\n    >\n      <Box component=\"span\" sx={{ display: \"inline-flex\", alignItems: \"center\", gap: 0.5 }}>\n        {busy ? <CircularProgress size={14} /> : <DownloadRoundedIcon fontSize=\"small\" />}\n        {!compact && (\n          <Box component=\"span\" sx={{ display: { xs: \"none\", sm: \"inline\" } }}>\n            {copy.export.triggerLabel}\n          </Box>\n        )}\n        {/* Dropped with the label — see the note on the Exibir trigger. */}\n        {!compact && <KeyboardArrowDownRoundedIcon fontSize=\"small\" />}\n      </Box>\n    </Button>\n  );\n}\n\n/** One format row: what it produces, and when to reach for it. */\nfunction FormatRow({\n  format,\n  onPick,\n  testIdPrefix,\n}: {\n  format: DataViewExportFormat;\n  onPick: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onPick}\n      data-testid={`${testIdPrefix}-export-${format}`}\n      sx={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        width: \"100%\",\n        px: 1.5,\n        py: 1,\n        border: 0,\n        background: \"none\",\n        cursor: \"pointer\",\n        font: \"inherit\",\n        textAlign: \"left\",\n        \"&:hover\": { bgcolor: \"action.hover\" },\n      }}\n    >\n      <Box component=\"span\" sx={{ fontSize: \"0.8125rem\" }}>\n        {copy.export.formats[format]?.label ?? format}\n      </Box>\n      <Box component=\"span\" sx={{ fontSize: \"0.6875rem\", color: \"text.disabled\" }}>\n        {copy.export.formats[format]?.hint ?? \"\"}\n      </Box>\n    </Box>\n  );\n}\n\n/** The panel: what is about to be exported, then the formats. */\nfunction ExportPanel({\n  formats,\n  selectedCount,\n  totalCount,\n  columnCount,\n  onPick,\n  testIdPrefix,\n}: {\n  formats: DataViewExportFormat[];\n  selectedCount: number;\n  totalCount: number;\n  columnCount: number;\n  onPick: (format: DataViewExportFormat) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box data-testid={`${testIdPrefix}-export-panel`}>\n      <Box sx={{ px: 1.5, pt: 1, pb: 1, borderBottom: 1, borderColor: \"divider\" }}>\n        <Text variant=\"caption\" as=\"p\">\n          <Box component=\"span\" data-testid={`${testIdPrefix}-export-scope`}>\n            Exportando {scopeLabel(selectedCount, totalCount)}\n          </Box>\n        </Text>\n        <Text variant=\"caption\" as=\"p\">\n          <Box component=\"span\" sx={{ color: \"text.disabled\" }}>\n            {copy.export.visibleColumns(columnCount)}\n          </Box>\n        </Text>\n      </Box>\n      {formats.map((format) => (\n        <FormatRow\n          key={format}\n          format={format}\n          onPick={() => onPick(format)}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\n/** The toolbar's Exportar control. Renders nothing when no host wired it. */\nexport function DataViewsExportMenu({\n  config,\n  query,\n  totalCount,\n  selectedIds,\n  columns,\n  testIdPrefix,\n  compact,\n}: ExportMenuProps): React.JSX.Element {\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  const [busy, setBusy] = useState(false);\n\n  const run = async (format: DataViewExportFormat): Promise<void> => {\n    setAnchor(null);\n    setBusy(true);\n    try {\n      await config.onExport({\n        format,\n        // UNPAGINATED: page 1 of a page as large as the whole result. The host\n        // re-queries with this; nothing here reads the loaded rows.\n        query: { ...query, page: 1, pageSize: Math.max(1, totalCount) },\n        selectedIds: selectedIds.length > 0 ? [...selectedIds] : undefined,\n        columns,\n      });\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <>\n      <ExportTrigger busy={busy} onOpen={setAnchor} testIdPrefix={testIdPrefix} compact={compact} />\n      <Popover\n        open={Boolean(anchor)}\n        anchorEl={anchor}\n        onClose={() => setAnchor(null)}\n        anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\n        transformOrigin={{ vertical: \"top\", horizontal: \"right\" }}\n        slotProps={{ paper: { sx: { width: 260, maxWidth: \"calc(100vw - 32px)\" } } }}\n      >\n        <ExportPanel\n          formats={config.formats ?? ALL_FORMATS}\n          selectedCount={selectedIds.length}\n          totalCount={totalCount}\n          columnCount={columns.length}\n          onPick={(format) => void run(format)}\n          testIdPrefix={testIdPrefix}\n        />\n      </Popover>\n    </>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-NQHOHQCY.js

@@ -0,0 +1,71 @@
+import {
+  avatarFor,
+  chipRole,
+  chipStyles,
+  iconWithTestId,
+  isClickable,
+  makeKeyDownHandler,
+  makeTestId
+} from "./chunk-FS4X3VDA.js";
+
+// src/components/data-display/Chip/Chip.tsx
+import CancelIcon from "@mui/icons-material/Cancel";
+import MuiChip from "@mui/material/Chip/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var muiSizeFor = (size) => size === "xs" || size === "sm" ? "small" : "medium";
+var muiColorFor = (color) => {
+  if (color === "danger") return "error";
+  return color === "neutral" ? "default" : color;
+};
+var Chip = forwardRef(({
+  label,
+  variant = "filled",
+  size = "md",
+  color = "primary",
+  avatarSrc,
+  avatar,
+  icon,
+  selected,
+  selectable,
+  deletable,
+  disabled,
+  onClick,
+  onDelete,
+  className,
+  dataTestId,
+  ...props
+}, ref) => {
+  const testId = makeTestId(dataTestId);
+  const clickable = isClickable(disabled, onClick, selectable);
+  return /* @__PURE__ */ jsx(
+    MuiChip,
+    {
+      ref,
+      label: /* @__PURE__ */ jsx("span", { "data-testid": testId("label"), children: label }),
+      variant,
+      size: muiSizeFor(size),
+      color: muiColorFor(color),
+      avatar: avatarFor(avatar, avatarSrc),
+      icon: iconWithTestId(icon, testId("icon")),
+      onDelete: deletable ? onDelete : void 0,
+      deleteIcon: deletable ? /* @__PURE__ */ jsx(CancelIcon, { "data-testid": testId("delete") }) : void 0,
+      disabled,
+      clickable,
+      onClick: clickable ? onClick : void 0,
+      onKeyDown: makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete }),
+      className,
+      role: chipRole(selectable, onClick),
+      "aria-selected": selectable ? selected : void 0,
+      "data-testid": dataTestId || "chip",
+      sx: chipStyles({ variant, selected, clickable, disabled }),
+      ...props
+    }
+  );
+});
+Chip.displayName = "Chip";
+
+export {
+  Chip
+};
+//# sourceMappingURL=chunk-NQHOHQCY.js.map

package/dist/chunk-NQHOHQCY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.tsx"],"sourcesContent":["import CancelIcon from '@mui/icons-material/Cancel';\nimport MuiChip from '@mui/material/Chip/index.js';\nimport { forwardRef } from 'react';\n\nimport {\n  avatarFor,\n  chipRole,\n  chipStyles,\n  iconWithTestId,\n  isClickable,\n  makeKeyDownHandler,\n  makeTestId,\n} from './Chip.helpers';\nimport type { ChipProps } from './Chip.types';\n\n/** MUI draws two chip sizes; ours are the house abbreviations for them. */\nconst muiSizeFor = (size: NonNullable<ChipProps['size']>): 'small' | 'medium' =>\n  size === 'xs' || size === 'sm' ? 'small' : 'medium';\n\ntype MuiChipColor =\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'default';\n\n/**\n * `danger` and `neutral` are ours; the rest are MUI's own names already.\n *\n * The same boundary translation `Button` performs, and it must stay a\n * translation rather than a cast: a cast is what let `danger` through untouched\n * and had MUI silently fall back to grey.\n *\n * `neutral` maps to `default`, not to `inherit` as it does on a button. A chip's\n * unaccented state is a real palette entry with its own fill; `inherit` would\n * take the surrounding text colour and paint a chip that reads as disabled.\n */\nconst muiColorFor = (color: NonNullable<ChipProps['color']>): MuiChipColor => {\n  if (color === 'danger') return 'error';\n  return color === 'neutral' ? 'default' : color;\n};\n\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(({\n  label,\n  variant = 'filled',\n  size = 'md',\n  color = 'primary',\n  avatarSrc,\n  avatar,\n  icon,\n  selected,\n  selectable,\n  deletable,\n  disabled,\n  onClick,\n  onDelete,\n  className,\n  dataTestId,\n  ...props\n}, ref) => {\n  const testId = makeTestId(dataTestId);\n  const clickable = isClickable(disabled, onClick, selectable);\n\n  return (\n    <MuiChip\n      ref={ref}\n      label={<span data-testid={testId('label')}>{label}</span>}\n      variant={variant}\n      size={muiSizeFor(size)}\n      color={muiColorFor(color)}\n      avatar={avatarFor(avatar, avatarSrc)}\n      icon={iconWithTestId(icon, testId('icon'))}\n      onDelete={deletable ? onDelete : undefined}\n      deleteIcon={deletable ? <CancelIcon data-testid={testId('delete')} /> : undefined}\n      disabled={disabled}\n      clickable={clickable}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete })}\n      className={className}\n      role={chipRole(selectable, onClick)}\n      aria-selected={selectable ? selected : undefined}\n      data-testid={dataTestId || 'chip'}\n      sx={chipStyles({ variant, selected, clickable, disabled })}\n      {...props}\n    />\n  );\n});\n\nChip.displayName = 'Chip';\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,aAAa;AACpB,SAAS,kBAAkB;AAkEd;AApDb,IAAM,aAAa,CAAC,SAClB,SAAS,QAAQ,SAAS,OAAO,UAAU;AAsB7C,IAAM,cAAc,CAAC,UAAyD;AAC5E,MAAI,UAAU,SAAU,QAAO;AAC/B,SAAO,UAAU,YAAY,YAAY;AAC3C;AAEO,IAAM,OAAO,WAAsC,CAAC;AAAA,EACzD;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,YAAY,YAAY,UAAU,SAAS,UAAU;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,oBAAC,UAAK,eAAa,OAAO,OAAO,GAAI,iBAAM;AAAA,MAClD;AAAA,MACA,MAAM,WAAW,IAAI;AAAA,MACrB,OAAO,YAAY,KAAK;AAAA,MACxB,QAAQ,UAAU,QAAQ,SAAS;AAAA,MACnC,MAAM,eAAe,MAAM,OAAO,MAAM,CAAC;AAAA,MACzC,UAAU,YAAY,WAAW;AAAA,MACjC,YAAY,YAAY,oBAAC,cAAW,eAAa,OAAO,QAAQ,GAAG,IAAK;AAAA,MACxE;AAAA,MACA;AAAA,MACA,SAAS,YAAY,UAAU;AAAA,MAC/B,WAAW,mBAAmB,EAAE,UAAU,WAAW,YAAY,SAAS,SAAS,CAAC;AAAA,MACpF;AAAA,MACA,MAAM,SAAS,YAAY,OAAO;AAAA,MAClC,iBAAe,aAAa,WAAW;AAAA,MACvC,eAAa,cAAc;AAAA,MAC3B,IAAI,WAAW,EAAE,SAAS,UAAU,WAAW,SAAS,CAAC;AAAA,MACxD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;","names":[]}

package/dist/chunk-NR3J7VQL.js

@@ -0,0 +1,146 @@
+import {
+  accentFor
+} from "./chunk-I6PZVHIT.js";
+
+// src/components/form/Label/Label.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZES = {
+  xs: (theme) => ({ fontSize: "0.75rem", lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
+  sm: (theme) => ({ fontSize: "0.875rem", lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
+  md: (theme) => ({ fontSize: "1rem", lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
+  lg: (theme) => ({ fontSize: "1.125rem", lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
+  xl: (theme) => ({ fontSize: "1.25rem", 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-NR3J7VQL.js.map