@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-LYVTJLCF.js

@@ -0,0 +1,216 @@
+import {
+  useDragGestures
+} from "./chunk-CRN4KKNI.js";
+import {
+  SPRING_CONFIG
+} from "./chunk-IM4DMKH4.js";
+
+// src/components/data-display/Sheet/Sheet.hooks.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var closestSnapPoint = (points, position, from, velocity, velocityThreshold) => {
+  if (Math.abs(velocity) > velocityThreshold) {
+    const index = points.findIndex((point) => Math.abs(point - from) < 0.01);
+    if (velocity > 0 && index < points.length - 1) return points[index + 1];
+    if (velocity < 0 && index > 0) return points[index - 1];
+  }
+  return points.reduce(
+    (closest, point) => Math.abs(position - point) < Math.abs(position - closest) ? point : closest,
+    points[0] ?? from
+  );
+};
+var useSheetHeight = (input) => {
+  const { isVerticalSheet, isBottomSheet, isTopSheet } = input;
+  const [currentHeight, setCurrentHeight] = useState(null);
+  const sheetRef = useRef(null);
+  const updateSheetHeight = useCallback(
+    (snapPoint) => {
+      if (!sheetRef.current || !isVerticalSheet) return;
+      const height = Math.round(window.innerHeight * snapPoint);
+      if (isBottomSheet) {
+        sheetRef.current.style.height = `${height}px`;
+        sheetRef.current.style.transform = "translateY(0)";
+      } else if (isTopSheet) {
+        sheetRef.current.style.height = `${height}px`;
+      }
+      setCurrentHeight(height);
+    },
+    [isBottomSheet, isTopSheet, isVerticalSheet]
+  );
+  return { sheetRef, currentHeight, updateSheetHeight };
+};
+var useSnapAnimation = ({
+  isVerticalSheet,
+  animationConfig,
+  updateSheetHeight,
+  onSettled,
+  enabled
+}) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const animationFrameRef = useRef(void 0);
+  const animateToSnapPoint = useCallback(
+    (from, to, velocity = 0) => {
+      if (!enabled() || !isVerticalSheet) return;
+      setIsAnimating(true);
+      const distance = to - from;
+      const startTime = globalThis.performance.now();
+      const { tension, friction } = { ...SPRING_CONFIG, ...animationConfig };
+      let currentVelocity = velocity * 1e3;
+      const animate = () => {
+        const elapsed = (globalThis.performance.now() - startTime) / 1e3;
+        const springForce = -tension * (from - to);
+        const dampingForce = -friction * currentVelocity;
+        currentVelocity += (springForce + dampingForce) * 0.016;
+        const progress = Math.min(1, elapsed * 4);
+        updateSheetHeight(from + distance * progress);
+        if (progress < 1) {
+          animationFrameRef.current = window.requestAnimationFrame(animate);
+          return;
+        }
+        setIsAnimating(false);
+        onSettled(to);
+        updateSheetHeight(to);
+      };
+      animate();
+    },
+    [isVerticalSheet, animationConfig, updateSheetHeight, onSettled, enabled]
+  );
+  const cancelAnimation = useCallback(() => {
+    if (animationFrameRef.current) {
+      window.cancelAnimationFrame(animationFrameRef.current);
+    }
+  }, []);
+  return { isAnimating, animateToSnapPoint, cancelAnimation };
+};
+var useSnapGeometry = (input) => {
+  const {
+    isVerticalSheet,
+    snapPoints,
+    defaultSnapPoint,
+    minSnapPoint,
+    maxSnapPoint,
+    velocityThreshold,
+    animationConfig,
+    onSnapPointChange
+  } = input;
+  const [currentSnapPoint, setCurrentSnapPoint] = useState(defaultSnapPoint);
+  const { sheetRef, currentHeight, updateSheetHeight } = useSheetHeight(input);
+  const sortedSnapPoints = useMemo(
+    () => [...snapPoints].sort((a, b) => a - b).filter((point) => point >= minSnapPoint && point <= maxSnapPoint),
+    [snapPoints, minSnapPoint, maxSnapPoint]
+  );
+  const onSettled = useCallback(
+    (snapPoint) => {
+      setCurrentSnapPoint(snapPoint);
+      onSnapPointChange?.(snapPoint);
+    },
+    [onSnapPointChange]
+  );
+  const hasPanel = useCallback(() => Boolean(sheetRef.current), [sheetRef]);
+  const { isAnimating, animateToSnapPoint, cancelAnimation } = useSnapAnimation({
+    isVerticalSheet,
+    animationConfig,
+    updateSheetHeight,
+    onSettled,
+    enabled: hasPanel
+  });
+  const settleAt = useCallback(
+    (position, velocity) => {
+      const target = closestSnapPoint(
+        sortedSnapPoints,
+        position,
+        currentSnapPoint,
+        velocity,
+        velocityThreshold
+      );
+      if (target === void 0) return void 0;
+      animateToSnapPoint(currentSnapPoint, target, velocity);
+      return target;
+    },
+    [sortedSnapPoints, currentSnapPoint, velocityThreshold, animateToSnapPoint]
+  );
+  const resetToDefaultSnapPoint = useCallback(() => {
+    setCurrentSnapPoint(defaultSnapPoint);
+    updateSheetHeight(defaultSnapPoint);
+  }, [defaultSnapPoint, updateSheetHeight]);
+  return {
+    sheetRef,
+    currentSnapPoint,
+    currentHeight,
+    isAnimating,
+    updateSheetHeight,
+    settleAt,
+    resetToDefaultSnapPoint,
+    cancelAnimation
+  };
+};
+var useSheetDrag = (input) => {
+  const geometry = useSnapGeometry(input);
+  const { isDragging, handleDragStart } = useDragGestures(input, geometry);
+  return {
+    sheetRef: geometry.sheetRef,
+    currentHeight: geometry.currentHeight,
+    isAnimating: geometry.isAnimating,
+    resetToDefaultSnapPoint: geometry.resetToDefaultSnapPoint,
+    isDragging,
+    handleDragStart
+  };
+};
+var useSheetOpen = (input) => {
+  const {
+    open,
+    persistent,
+    disabled,
+    closeOnEscape,
+    closeOnOverlayClick,
+    isDraggableVariant,
+    isVerticalSheet,
+    resetToDefaultSnapPoint,
+    onOpenChange,
+    onClose,
+    onOpen
+  } = input;
+  const [isOpen, setIsOpen] = useState(open);
+  const handleClose = useCallback(() => {
+    if (!persistent && !disabled) {
+      setIsOpen(false);
+      onOpenChange?.(false);
+      onClose?.();
+    }
+  }, [persistent, disabled, onOpenChange, onClose]);
+  const handleOverlayClick = useCallback(() => {
+    if (closeOnOverlayClick && !persistent) {
+      handleClose();
+    }
+  }, [closeOnOverlayClick, persistent, handleClose]);
+  const handleSwipeOpen = useCallback(() => {
+    setIsOpen(true);
+    onOpenChange?.(true);
+    onOpen?.();
+  }, [onOpenChange, onOpen]);
+  useEffect(() => {
+    setIsOpen(open);
+    if (open) {
+      onOpen?.();
+      if (isDraggableVariant && isVerticalSheet) {
+        resetToDefaultSnapPoint();
+      }
+    }
+  }, [open, onOpen, isDraggableVariant, isVerticalSheet, resetToDefaultSnapPoint]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (closeOnEscape && e.key === "Escape") {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, handleClose]);
+  return { isOpen, handleClose, handleOverlayClick, handleSwipeOpen };
+};
+
+export {
+  useSheetDrag,
+  useSheetOpen
+};
+//# sourceMappingURL=chunk-LYVTJLCF.js.map

package/dist/chunk-M3MHYE2M.js

@@ -0,0 +1,154 @@
+import {
+  containerStyles,
+  frameBox
+} from "./chunk-OHZU4IT3.js";
+import {
+  CarouselTrack
+} from "./chunk-TRHWA74K.js";
+import {
+  useCarouselNavigation
+} from "./chunk-RUIV5TVA.js";
+import {
+  CarouselChrome
+} from "./chunk-WOAXKWAB.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+import {
+  muiColor
+} from "./chunk-7ZPUN7TV.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,
+  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,
+    ...frameBox(theme, size, 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-M3MHYE2M.js.map

package/dist/chunk-M3MHYE2M.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, frameBox } 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  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, ...frameBox(theme, size, 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;AAiFnC,cAMJ,YANI;AApER,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,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,GAAG,SAAS,OAAO,MAAM,QAAQ,KAAK;AAAA,IAAG;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5F,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-M5ZXL52T.js

@@ -0,0 +1,127 @@
+import {
+  BADGE_DESTRUCTIVE_FONT_WEIGHT,
+  GLASS_BACKGROUND_ALPHA,
+  GLASS_BLUR_PX,
+  GLASS_BORDER_ALPHA,
+  GLASS_INSET_HIGHLIGHT_ALPHA,
+  GLASS_SATURATE,
+  OUTLINE_BORDER_WIDTH,
+  SECONDARY_BACKGROUND_ALPHA,
+  SECONDARY_BORDER_ALPHA
+} from "./chunk-PYC4CWCQ.js";
+import {
+  absoluteInk,
+  onMedia,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Badge/Badge.variants.ts
+import { alpha } from "@mui/material/styles/index.js";
+var BADGE_VARIANTS = {
+  default: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: colorPalette.main,
+    color: colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: sizeStyles.pillRadius
+  }),
+  dot: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: colorPalette.main,
+    width: sizeStyles.dotSize,
+    height: sizeStyles.dotSize,
+    minWidth: sizeStyles.dotSize,
+    borderRadius: "50%",
+    padding: 0
+  }),
+  count: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: colorPalette.main,
+    color: colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: "50%"
+  }),
+  gradient: (theme, colorPalette, sizeStyles) => ({
+    background: `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`,
+    color: onMedia(theme),
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: sizeStyles.pillRadius
+  }),
+  glass: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: alpha(colorPalette.main, GLASS_BACKGROUND_ALPHA),
+    backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,
+    border: `1px solid ${alpha(colorPalette.main, GLASS_BORDER_ALPHA)}`,
+    color: colorPalette.main,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: sizeStyles.pillRadius,
+    boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}`
+  }),
+  outline: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: "transparent",
+    border: `${rem(theme, OUTLINE_BORDER_WIDTH)} solid ${colorPalette.main}`,
+    color: colorPalette.main,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: sizeStyles.pillRadius
+  }),
+  secondary: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: alpha(colorPalette.main, SECONDARY_BACKGROUND_ALPHA),
+    color: colorPalette.main,
+    border: `1px solid ${alpha(colorPalette.main, SECONDARY_BORDER_ALPHA)}`,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: sizeStyles.pillRadius
+  }),
+  destructive: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: sizeStyles.pillRadius,
+    fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT
+  }),
+  success: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: sizeStyles.pillRadius
+  }),
+  warning: (theme, colorPalette, sizeStyles) => ({
+    backgroundColor: theme.palette.warning.main,
+    color: theme.palette.warning.contrastText,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    fontSize: rem(theme, sizeStyles.step.fontSize),
+    padding: sizeStyles.padding,
+    borderRadius: sizeStyles.pillRadius
+  })
+};
+var badgeVariantStyles = (theme, colorPalette, sizeStyles, customVariant) => customVariant ? BADGE_VARIANTS[customVariant]?.(theme, colorPalette, sizeStyles) ?? {} : {};
+
+export {
+  badgeVariantStyles
+};
+//# sourceMappingURL=chunk-M5ZXL52T.js.map

package/dist/chunk-M5ZXL52T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.variants.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport {\n  BADGE_DESTRUCTIVE_FONT_WEIGHT,\n  GLASS_BACKGROUND_ALPHA,\n  GLASS_BLUR_PX,\n  GLASS_BORDER_ALPHA,\n  GLASS_INSET_HIGHLIGHT_ALPHA,\n  GLASS_SATURATE,\n  OUTLINE_BORDER_WIDTH,\n  SECONDARY_BACKGROUND_ALPHA,\n  SECONDARY_BORDER_ALPHA,\n} from './Badge.metrics';\nimport type { BadgePalette, BadgeSizeStyles } from './Badge.styles';\nimport { absoluteInk, onMedia, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst BADGE_VARIANTS: Record<\n  string,\n  (theme: Theme, colorPalette: BadgePalette, sizeStyles: BadgeSizeStyles) => CSSObject\n> = {\n  default: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        color:\n          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  dot: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        width: sizeStyles.dotSize,\n        height: sizeStyles.dotSize,\n        minWidth: sizeStyles.dotSize,\n        borderRadius: '50%',\n        padding: 0 }),\n  count: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: colorPalette.main,\n        color:\n          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || absoluteInk(theme).white,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: '50%' }),\n  gradient: (theme, colorPalette, sizeStyles) => ({\n        background: `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`,\n        color: onMedia(theme),\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  glass: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: alpha(colorPalette.main, GLASS_BACKGROUND_ALPHA),\n        backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,\n        WebkitBackdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)}) saturate(${GLASS_SATURATE * 100}%)`,\n        border: `1px solid ${alpha(colorPalette.main, GLASS_BORDER_ALPHA)}`,\n        color: colorPalette.main,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius,\n        boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, GLASS_INSET_HIGHLIGHT_ALPHA)}` }),\n  outline: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: 'transparent',\n        border: `${rem(theme, OUTLINE_BORDER_WIDTH)} solid ${colorPalette.main}`,\n        color: colorPalette.main,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  secondary: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: alpha(colorPalette.main, SECONDARY_BACKGROUND_ALPHA),\n        color: colorPalette.main,\n        border: `1px solid ${alpha(colorPalette.main, SECONDARY_BORDER_ALPHA)}`,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  destructive: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.error.main,\n        color: theme.palette.error.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius,\n        fontWeight: BADGE_DESTRUCTIVE_FONT_WEIGHT }),\n  success: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.success.main,\n        color: theme.palette.success.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }),\n  warning: (theme, colorPalette, sizeStyles) => ({\n        backgroundColor: theme.palette.warning.main,\n        color: theme.palette.warning.contrastText,\n        minWidth: sizeStyles.minWidth,\n        height: sizeStyles.height,\n        fontSize: rem(theme, sizeStyles.step.fontSize),\n        padding: sizeStyles.padding,\n        borderRadius: sizeStyles.pillRadius }) };\n\nexport const badgeVariantStyles = (\n  theme: Theme,\n  colorPalette: BadgePalette,\n  sizeStyles: BadgeSizeStyles,\n  customVariant?: string,\n): CSSObject =>\n  customVariant ? (BADGE_VARIANTS[customVariant]?.(theme, colorPalette, sizeStyles) ?? {}) : {};\n\n"],"mappings":"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","names":[]}