@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-5NFPO3YY.js

@@ -0,0 +1,84 @@
+import {
+  CHIP_SIZES,
+  CHIP_TRANSITION_EASING,
+  CHIP_TRANSITION_MS,
+  HOVER_LIFT_PX,
+  HOVER_SHADOW
+} from "./chunk-KU6VHNRV.js";
+import {
+  chipKeyAction
+} from "./chunk-BF4FYOAR.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/Chip/Chip.styles.tsx
+import Avatar from "@mui/material/Avatar/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var makeKeyDownHandler = (args) => (event) => {
+  const action = chipKeyAction(event.key, args);
+  if (action === null) return;
+  event.preventDefault();
+  if (action === "delete") {
+    args.onDelete?.();
+    return;
+  }
+  args.onClick?.();
+};
+var avatarFor = (avatar, avatarSrc) => {
+  if (avatar && React.isValidElement(avatar)) {
+    return avatar;
+  }
+  if (avatarSrc) {
+    const { avatarSize } = CHIP_SIZES.medium;
+    return /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, sx: { width: avatarSize, height: avatarSize } });
+  }
+  return void 0;
+};
+var hoverShadow = (theme) => `0 ${HOVER_SHADOW.offsetY}px ${HOVER_SHADOW.blur}px ${shadowInk(
+  theme,
+  theme.palette.mode === "dark" ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight
+)}`;
+var chipStyles = ({
+  variant,
+  selected,
+  clickable,
+  disabled
+}) => {
+  const lifts = clickable && !disabled;
+  return {
+    // Enhanced styling for outlined variant
+    ...variant === "outlined" && {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      backgroundColor: "transparent"
+    },
+    ...selected && variant === "outlined" && {
+      backgroundColor: (theme) => theme.palette.action.selected
+    },
+    "&:hover": {
+      ...lifts && {
+        transform: `translateY(-${HOVER_LIFT_PX}px)`,
+        boxShadow: (theme) => hoverShadow(theme)
+      }
+    },
+    "&:active": {
+      ...lifts && {
+        transform: "translateY(0px)"
+      }
+    },
+    transition: `all ${CHIP_TRANSITION_MS / 1e3}s ${CHIP_TRANSITION_EASING}`
+  };
+};
+var iconWithTestId = (icon, testId) => icon && React.isValidElement(icon) ? React.cloneElement(icon, {
+  "data-testid": testId
+}) : void 0;
+
+export {
+  makeKeyDownHandler,
+  avatarFor,
+  chipStyles,
+  iconWithTestId
+};
+//# sourceMappingURL=chunk-5NFPO3YY.js.map

package/dist/chunk-5NFPO3YY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.styles.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';\nimport { CHIP_SIZES, CHIP_TRANSITION_EASING, CHIP_TRANSITION_MS, HOVER_LIFT_PX, HOVER_SHADOW } from './Chip.metrics';\nimport type { ChipProps } from './Chip.types';\nimport { shadowInk } from '../../../tokens/ink';\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n * The DECISION is `chipKeyAction`, which the native half reads too.\n */\nexport const makeKeyDownHandler =\n  (args: ChipKeyArgs & { onClick?: () => void; onDelete?: () => void }) =>\n  (event: KeyboardEvent): void => {\n    const action = chipKeyAction(event.key, args);\n    if (action === null) return;\n    event.preventDefault();\n    if (action === 'delete') {\n      args.onDelete?.();\n      return;\n    }\n    args.onClick?.();\n  };\n\nexport const avatarFor = (\n  avatar: ChipProps['avatar'],\n  avatarSrc?: string,\n): ReactElement | undefined => {\n  if (avatar && React.isValidElement(avatar)) {\n    return avatar;\n  }\n  if (avatarSrc) {\n    const { avatarSize } = CHIP_SIZES.medium;\n    return <Avatar src={avatarSrc} sx={{ width: avatarSize, height: avatarSize }} />;\n  }\n  return undefined;\n};\n\ninterface ChipStyleArgs {\n  variant: ChipProps['variant'];\n  selected?: boolean;\n  clickable?: boolean;\n  disabled?: boolean;\n}\n\n/** The lift's shadow, per mode — the same numbers the native chip reads. */\nconst hoverShadow = (theme: Theme): string =>\n  `0 ${HOVER_SHADOW.offsetY}px ${HOVER_SHADOW.blur}px ${shadowInk(\n    theme,\n    theme.palette.mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight,\n  )}`;\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\nexport const chipStyles = ({\n  variant,\n  selected,\n  clickable,\n  disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n  const lifts = clickable && !disabled;\n\n  return {\n    // Enhanced styling for outlined variant\n    ...(variant === 'outlined' && {\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      backgroundColor: 'transparent',\n    }),\n    ...(selected &&\n      variant === 'outlined' && {\n        backgroundColor: (theme: Theme) => theme.palette.action.selected,\n      }),\n    '&:hover': {\n      ...(lifts && {\n        transform: `translateY(-${HOVER_LIFT_PX}px)`,\n        boxShadow: (theme: Theme) => hoverShadow(theme),\n      }),\n    },\n    '&:active': {\n      ...(lifts && {\n        transform: 'translateY(0px)',\n      }),\n    },\n    transition: `all ${CHIP_TRANSITION_MS / 1000}s ${CHIP_TRANSITION_EASING}`,\n  };\n};\n\nexport const iconWithTestId = (\n  icon: ChipProps['icon'],\n  testId: string,\n): ReactElement | undefined =>\n  icon && React.isValidElement(icon)\n    ? React.cloneElement(icon as ReactElement, {\n        'data-testid': testId,\n      } as Record<string, unknown>)\n    : undefined;\n"],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AAGnB,OAAO,WAAW;AAkCP;AAtBJ,IAAM,qBACX,CAAC,SACD,CAAC,UAA+B;AAC9B,QAAM,SAAS,cAAc,MAAM,KAAK,IAAI;AAC5C,MAAI,WAAW,KAAM;AACrB,QAAM,eAAe;AACrB,MAAI,WAAW,UAAU;AACvB,SAAK,WAAW;AAChB;AAAA,EACF;AACA,OAAK,UAAU;AACjB;AAEK,IAAM,YAAY,CACvB,QACA,cAC6B;AAC7B,MAAI,UAAU,MAAM,eAAe,MAAM,GAAG;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,UAAM,EAAE,WAAW,IAAI,WAAW;AAClC,WAAO,oBAAC,UAAO,KAAK,WAAW,IAAI,EAAE,OAAO,YAAY,QAAQ,WAAW,GAAG;AAAA,EAChF;AACA,SAAO;AACT;AAUA,IAAM,cAAc,CAAC,UACnB,KAAK,aAAa,OAAO,MAAM,aAAa,IAAI,MAAM;AAAA,EACpD;AAAA,EACA,MAAM,QAAQ,SAAS,SAAS,aAAa,YAAY,aAAa;AACxE,CAAC;AAQI,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,QAAQ,aAAa,CAAC;AAE5B,SAAO;AAAA;AAAA,IAEL,GAAI,YAAY,cAAc;AAAA,MAC5B,aAAa;AAAA,MACb,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,GAAI,YACF,YAAY,cAAc;AAAA,MACxB,iBAAiB,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACF,WAAW;AAAA,MACT,GAAI,SAAS;AAAA,QACX,WAAW,eAAe,aAAa;AAAA,QACvC,WAAW,CAAC,UAAiB,YAAY,KAAK;AAAA,MAChD;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,YAAY,OAAO,qBAAqB,GAAI,KAAK,sBAAsB;AAAA,EACzE;AACF;AAEO,IAAM,iBAAiB,CAC5B,MACA,WAEA,QAAQ,MAAM,eAAe,IAAI,IAC7B,MAAM,aAAa,MAAsB;AAAA,EACvC,eAAe;AACjB,CAA4B,IAC5B;","names":[]}

package/dist/chunk-5QTMJ2RU.js

@@ -0,0 +1,157 @@
+import {
+  PillControl
+} from "./chunk-EVSKEIXI.js";
+import {
+  PanelRangeField
+} from "./chunk-ZHFS5L6Q.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-NMX3JAAB.js";
+import {
+  StackedModal
+} from "./chunk-IL7JZKXY.js";
+import {
+  StackedModalContent
+} from "./chunk-RWTFZ7J5.js";
+
+// src/components/data-display/DataViews/data-views-filter-panel.tsx
+import Box from "@mui/material/Box/index.js";
+import Link from "@mui/material/Link/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PillField({
+  field,
+  selected,
+  testIdPrefix,
+  onTogglePill,
+  onClearField
+}) {
+  const testId = `${testIdPrefix}-filter-${field.id}`;
+  if (field.searchEnabled || field.control === "multiselect" || field.control === "category") {
+    return /* @__PURE__ */ jsx(
+      PillControl,
+      {
+        fieldId: field.id,
+        pill: field,
+        selected,
+        onTogglePill,
+        onClearField,
+        testIdPrefix,
+        layout: "stacked"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TableFilter.CheckboxField,
+    {
+      label: field.label,
+      options: field.options,
+      selected: new Set(selected),
+      onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+      testId
+    }
+  );
+}
+function FilterControls({
+  testIdPrefix,
+  search,
+  fields,
+  rangeFields,
+  pills,
+  ranges,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableFilter.Keyword,
+      {
+        value: search,
+        onChange: onSearchChange,
+        label: copy.search.allColumnsLabel,
+        placeholder: copy.search.keywordPlaceholder,
+        testId: `${testIdPrefix}-search-all`
+      }
+    ),
+    (fields.length > 0 || rangeFields.length > 0) && /* @__PURE__ */ jsxs(TableFilter.Section, { title: copy.filters.panelTitle, children: [
+      fields.map((field) => /* @__PURE__ */ jsx(
+        PillField,
+        {
+          field,
+          selected: pills[field.id] ?? [],
+          testIdPrefix,
+          onTogglePill,
+          onClearField
+        },
+        field.id
+      )),
+      rangeFields.map((field) => /* @__PURE__ */ jsx(
+        PanelRangeField,
+        {
+          field,
+          value: ranges[field.id] ?? {},
+          onChange: (range) => onChangeRange(field.id, range),
+          testId: `${testIdPrefix}-range-${field.id}`
+        },
+        field.id
+      ))
+    ] })
+  ] });
+}
+function GridFilterPanel(props) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    TableFilter.Panel,
+    {
+      onClearAll: props.onClearAll,
+      clearTestId: `${props.testIdPrefix}-clear-filters`,
+      ariaLabel: copy.filters.panelTitle,
+      children: /* @__PURE__ */ jsx(FilterControls, { ...props })
+    }
+  );
+}
+function FilterDialog({
+  open,
+  onClose,
+  ...props
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    StackedModal,
+    {
+      open,
+      onClose,
+      navigationTitle: copy.filters.panelTitle,
+      backLabel: copy.nav.goBack,
+      modalId: `${props.testIdPrefix}-filters`,
+      maxWidth: "xs",
+      dataTestId: `${props.testIdPrefix}-filter-dialog`,
+      children: /* @__PURE__ */ jsx(StackedModalContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            component: "button",
+            type: "button",
+            underline: "hover",
+            onClick: props.onClearAll,
+            "data-testid": `${props.testIdPrefix}-clear-filters`,
+            sx: { fontSize: "0.75rem", color: "text.secondary" },
+            children: copy.filters.clearAllFilters
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FilterControls, { ...props })
+      ] }) })
+    }
+  );
+}
+
+export {
+  GridFilterPanel,
+  FilterDialog
+};
+//# sourceMappingURL=chunk-5QTMJ2RU.js.map

package/dist/chunk-5VWYCVXF.js

@@ -0,0 +1,94 @@
+import {
+  SheetContent,
+  SheetFooter,
+  SheetHeader
+} from "./chunk-MISZGWO7.js";
+import {
+  muiColor
+} from "./chunk-7ZPUN7TV.js";
+
+// src/components/data-display/Sheet/Sheet.body.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var needsHeader = (props) => Boolean(
+  props.showHandle || props.title || props.description || props.showCloseButton || props.header
+);
+var SheetLoading = ({ color }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: 200
+    },
+    children: /* @__PURE__ */ jsx(CircularProgress, { color: color === void 0 ? void 0 : muiColor(color, "inherit") })
+  }
+);
+var SheetBody = (props) => {
+  const {
+    title,
+    description,
+    showCloseButton,
+    showHandle,
+    header,
+    footer,
+    loading,
+    color,
+    children,
+    onClick,
+    onFocus,
+    onBlur,
+    testId,
+    isDragging,
+    isVerticalSheet,
+    isDraggableVariant,
+    onClose,
+    onDragStart
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      onClick,
+      onFocus,
+      onBlur,
+      "data-testid": testId,
+      sx: {
+        // A vertical sheet's panel is a column whose height is its CONTENT, up
+        // to the `size` ceiling — so this fills what the panel has rather than
+        // asking for a percentage of it, and `minHeight: 0` is what lets it
+        // shrink past its content so `SheetContent` scrolls instead of the
+        // panel overflowing. A side sheet's panel is full-height already.
+        ...isVerticalSheet ? { flex: "1 1 auto", minHeight: 0 } : { height: "100%" },
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        userSelect: isDragging ? "none" : "auto"
+      },
+      children: [
+        needsHeader(props) && /* @__PURE__ */ jsx(
+          SheetHeader,
+          {
+            title,
+            description,
+            showCloseButton,
+            onClose,
+            showHandle: showHandle && isVerticalSheet,
+            isDraggable: isDraggableVariant && isVerticalSheet,
+            onDragStart,
+            dataTestId: `${testId}-header`,
+            children: header
+          }
+        ),
+        /* @__PURE__ */ jsx(SheetContent, { padded: true, dataTestId: `${testId}-content`, children: loading ? /* @__PURE__ */ jsx(SheetLoading, { color }) : children }),
+        footer && /* @__PURE__ */ jsx(SheetFooter, { sticky: true, divider: true, dataTestId: `${testId}-footer`, children: footer })
+      ]
+    }
+  );
+};
+
+export {
+  SheetBody
+};
+//# sourceMappingURL=chunk-5VWYCVXF.js.map

package/dist/chunk-63UQJVBW.js

@@ -0,0 +1,198 @@
+import {
+  bounceAnimation,
+  breatheAnimation,
+  fadeInOutAnimation,
+  flipAnimation,
+  floatAnimation,
+  glowPulseAnimation,
+  heartbeatAnimation,
+  jelloAnimation,
+  morphAnimation,
+  neonFlickerAnimation,
+  pulseAnimation,
+  rippleAnimation,
+  rotateAnimation,
+  shakeAnimation,
+  spinAnimation,
+  swingAnimation,
+  translateAnimation,
+  wobbleAnimation
+} from "./chunk-3T5Z5HXF.js";
+import {
+  neutralTones,
+  shadowInk,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var sizeConfigs = {
+  xs: { size: 12, fontSize: 10 },
+  sm: { size: 24, fontSize: 20 },
+  md: { size: 32, fontSize: 28 },
+  lg: { size: 48, fontSize: 44 },
+  xl: { size: 64, fontSize: 60 }
+};
+var ANIMATIONS = {
+  rotate: { keyframes: `${rotateAnimation}`, easing: "linear", scale: 1 },
+  pulse: { keyframes: `${pulseAnimation}`, easing: "ease-in-out", scale: 1 },
+  translate: { keyframes: `${translateAnimation}`, easing: "ease-in-out", scale: 1 },
+  bounce: { keyframes: `${bounceAnimation}`, easing: "ease-in-out", scale: 1 },
+  shake: { keyframes: `${shakeAnimation}`, easing: "ease-in-out", scale: 1 },
+  flip: { keyframes: `${flipAnimation}`, easing: "ease-in-out", scale: 1 },
+  spin: { keyframes: `${spinAnimation}`, easing: "ease-in-out", scale: 1 },
+  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: "ease-in-out", scale: 1 },
+  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: "ease-in-out", scale: 1 },
+  wobble: { keyframes: `${wobbleAnimation}`, easing: "ease-in-out", scale: 1 },
+  morph: { keyframes: `${morphAnimation}`, easing: "ease-in-out", scale: 1 },
+  swing: { keyframes: `${swingAnimation}`, easing: "ease-in-out", scale: 1 },
+  jello: { keyframes: `${jelloAnimation}`, easing: "ease-in-out", scale: 1 },
+  float: { keyframes: `${floatAnimation}`, easing: "ease-in-out", scale: 2 },
+  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: "ease-in-out", scale: 2 },
+  breathe: { keyframes: `${breatheAnimation}`, easing: "ease-in-out", scale: 1.5 }
+};
+var animationFor = (variant, duration, delay, loop) => {
+  const spec = ANIMATIONS[variant];
+  if (!spec) return "none";
+  const iterationCount = loop ? "infinite" : "1";
+  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : "0s"}`;
+};
+var SHADOWS = {
+  soft: (theme) => `0 4px 20px ${shadowInk(theme, 0.15)}`,
+  hard: (theme) => `4px 4px 0px ${shadowInk(theme, 0.25)}`,
+  elevated: (theme) => `0 10px 40px ${shadowInk(theme, 0.2)}, 0 2px 10px ${shadowInk(theme, 0.1)}`
+};
+var effectStyles = (theme, flags, animation, color) => {
+  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;
+  return {
+    ...$glass && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
+      backdropFilter: "blur(10px)",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      boxShadow: `inset 0 1px 1px ${sheen(theme, 0.3)}, 0 8px 32px ${shadowInk(theme, 0.1)}`
+    },
+    ...$metallic && {
+      background: `linear-gradient(145deg,
+      ${neutralTones(theme).track} 0%,
+      ${neutralTones(theme).muted} 25%,
+      ${neutralTones(theme).subtle} 50%,
+      ${neutralTones(theme).emphasis} 75%,
+      ${neutralTones(theme).subtle} 100%)`,
+      backgroundSize: "200% 200%",
+      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
+      boxShadow: `inset 0 2px 4px ${sheen(theme, 0.5)},
+                inset 0 -2px 4px ${shadowInk(theme, 0.3)},
+                0 4px 8px ${shadowInk(theme, 0.2)}`
+    },
+    ...$gradient && {
+      background: `linear-gradient(135deg,
+      ${theme.palette.primary.main} 0%,
+      ${theme.palette.secondary.main} 100%)`,
+      backgroundSize: "200% 200%",
+      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`
+    },
+    ...$neon && {
+      color,
+      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
+      filter: `brightness(1.2) contrast(1.2)`,
+      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`
+    },
+    ...$holographic && {
+      background: `linear-gradient(45deg,
+      ${theme.palette.primary.main} 0%,
+      ${theme.palette.secondary.main} 25%,
+      ${theme.palette.error.main} 50%,
+      ${theme.palette.warning.main} 75%,
+      ${theme.palette.primary.main} 100%)`,
+      backgroundSize: "400% 400%",
+      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,
+      backgroundClip: "text",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      filter: `hue-rotate(0deg)`,
+      "@keyframes hueRotate": {
+        "0%": { filter: "hue-rotate(0deg)" },
+        "100%": { filter: "hue-rotate(360deg)" }
+      },
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: -2,
+        borderRadius: "50%",
+        background: "inherit",
+        filter: "blur(10px)",
+        opacity: 0.5,
+        zIndex: -1
+      }
+    }
+  };
+};
+var iconSx = (theme, flags) => {
+  const {
+    $size,
+    $fontSize,
+    $animationVariant,
+    $duration,
+    $delay,
+    $loop,
+    $glow,
+    $glowColor,
+    $customColor,
+    $shadow,
+    $ripple,
+    $neon
+  } = flags;
+  const color = $customColor || theme.palette.primary.main;
+  const glowColor = $glowColor || color;
+  const animation = animationFor($animationVariant, $duration, $delay, $loop);
+  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: $size,
+    height: $size,
+    color,
+    animation,
+    position: "relative",
+    cursor: "default",
+    borderRadius: "50%",
+    transition: "all 0.3s ease",
+    boxShadow: SHADOWS[$shadow ?? "none"]?.(theme) ?? "none",
+    ...$glow && {
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: -8,
+        borderRadius: "50%",
+        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,
+        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,
+        zIndex: -1
+      },
+      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`
+    },
+    ...effectStyles(theme, flags, animation, color),
+    ...$ripple && {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: "50%",
+        border: `2px solid ${color}`,
+        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`
+      }
+    },
+    "& .MuiSvgIcon-root": glyphSize,
+    "& svg": glyphSize,
+    "&:hover": {
+      transform: "scale(1.05)",
+      filter: $neon ? `brightness(1.4) contrast(1.3)` : void 0
+    }
+  };
+};
+
+export {
+  sizeConfigs,
+  iconSx
+};
+//# sourceMappingURL=chunk-63UQJVBW.js.map

package/dist/chunk-63UQJVBW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  breatheAnimation,\n  fadeInOutAnimation,\n  flipAnimation,\n  floatAnimation,\n  glowPulseAnimation,\n  heartbeatAnimation,\n  jelloAnimation,\n  morphAnimation,\n  neonFlickerAnimation,\n  pulseAnimation,\n  rippleAnimation,\n  rotateAnimation,\n  shakeAnimation,\n  spinAnimation,\n  swingAnimation,\n  translateAnimation,\n  wobbleAnimation,\n} from './AnimatedIcon.animations';\nimport type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';\nimport { neutralTones, shadowInk, sheen } from '../../../tokens/ink';\n\nexport const sizeConfigs: Record<AnimationSize, { size: number; fontSize: number }> = {\n  xs: { size: 12, fontSize: 10 },\n  sm: { size: 24, fontSize: 20 },\n  md: { size: 32, fontSize: 28 },\n  lg: { size: 48, fontSize: 44 },\n  xl: { size: 64, fontSize: 60 },\n};\n\n/**\n * Every variant produces the same shorthand — keyframes, duration, easing,\n * iteration count, delay — so only the three things that actually differ are\n * tabulated. `scale` multiplies the caller's duration for the variants that\n * read as slower than the rest.\n */\nconst ANIMATIONS: Record<string, { keyframes: string; easing: string; scale: number }> = {\n  rotate: { keyframes: `${rotateAnimation}`, easing: 'linear', scale: 1 },\n  pulse: { keyframes: `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },\n  translate: { keyframes: `${translateAnimation}`, easing: 'ease-in-out', scale: 1 },\n  bounce: { keyframes: `${bounceAnimation}`, easing: 'ease-in-out', scale: 1 },\n  shake: { keyframes: `${shakeAnimation}`, easing: 'ease-in-out', scale: 1 },\n  flip: { keyframes: `${flipAnimation}`, easing: 'ease-in-out', scale: 1 },\n  spin: { keyframes: `${spinAnimation}`, easing: 'ease-in-out', scale: 1 },\n  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: 'ease-in-out', scale: 1 },\n  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: 'ease-in-out', scale: 1 },\n  wobble: { keyframes: `${wobbleAnimation}`, easing: 'ease-in-out', scale: 1 },\n  morph: { keyframes: `${morphAnimation}`, easing: 'ease-in-out', scale: 1 },\n  swing: { keyframes: `${swingAnimation}`, easing: 'ease-in-out', scale: 1 },\n  jello: { keyframes: `${jelloAnimation}`, easing: 'ease-in-out', scale: 1 },\n  float: { keyframes: `${floatAnimation}`, easing: 'ease-in-out', scale: 2 },\n  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: 'ease-in-out', scale: 2 },\n  breathe: { keyframes: `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },\n};\n\nconst animationFor = (\n  variant: AnimationVariant,\n  duration: number,\n  delay: number,\n  loop: boolean,\n) => {\n  const spec = ANIMATIONS[variant];\n  if (!spec) return 'none';\n\n  const iterationCount = loop ? 'infinite' : '1';\n  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;\n};\n\nconst SHADOWS: Record<string, (theme: Theme) => string> = {\n  soft: (theme) => `0 4px 20px ${shadowInk(theme, 0.15)}`,\n  hard: (theme) => `4px 4px 0px ${shadowInk(theme, 0.25)}`,\n  elevated: (theme) =>\n    `0 10px 40px ${shadowInk(theme, 0.2)}, 0 2px 10px ${shadowInk(theme, 0.1)}`,\n};\n\nexport interface IconStyleFlags {\n  $size: number;\n  $fontSize: number;\n  $animationVariant: AnimationVariant;\n  $duration: number;\n  $delay: number;\n  $loop: boolean;\n  $glow: boolean;\n  $glass: boolean;\n  $glowColor?: string;\n  $customColor?: string;\n  $metallic?: boolean;\n  $gradient?: boolean;\n  $shadow?: 'soft' | 'hard' | 'elevated' | 'none';\n  $ripple?: boolean;\n  $neon?: boolean;\n  $holographic?: boolean;\n}\n\n/**\n * The four surface treatments that paint the icon themselves — metallic,\n * gradient, neon and holographic — each run a second animation alongside the\n * chosen one, so they all need the base animation string.\n */\nconst effectStyles = (\n  theme: Theme,\n  flags: IconStyleFlags,\n  animation: string,\n  color: string,\n): CSSObject => {\n  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;\n\n  return {\n    ...($glass && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,\n      backdropFilter: 'blur(10px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      boxShadow: `inset 0 1px 1px ${sheen(theme, 0.3)}, 0 8px 32px ${shadowInk(theme, 0.1)}`,\n    }),\n    ...($metallic && {\n      background: `linear-gradient(145deg,\n      ${neutralTones(theme).track} 0%,\n      ${neutralTones(theme).muted} 25%,\n      ${neutralTones(theme).subtle} 50%,\n      ${neutralTones(theme).emphasis} 75%,\n      ${neutralTones(theme).subtle} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,\n      boxShadow: `inset 0 2px 4px ${sheen(theme, 0.5)},\n                inset 0 -2px 4px ${shadowInk(theme, 0.3)},\n                0 4px 8px ${shadowInk(theme, 0.2)}`,\n    }),\n    ...($gradient && {\n      background: `linear-gradient(135deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`,\n    }),\n    ...($neon && {\n      color,\n      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,\n      filter: `brightness(1.2) contrast(1.2)`,\n      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`,\n    }),\n    ...($holographic && {\n      background: `linear-gradient(45deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 25%,\n      ${theme.palette.error.main} 50%,\n      ${theme.palette.warning.main} 75%,\n      ${theme.palette.primary.main} 100%)`,\n      backgroundSize: '400% 400%',\n      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,\n      backgroundClip: 'text',\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      filter: `hue-rotate(0deg)`,\n      '@keyframes hueRotate': {\n        '0%': { filter: 'hue-rotate(0deg)' },\n        '100%': { filter: 'hue-rotate(360deg)' },\n      },\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: -2,\n        borderRadius: '50%',\n        background: 'inherit',\n        filter: 'blur(10px)',\n        opacity: 0.5,\n        zIndex: -1,\n      },\n    }),\n  };\n};\n\nexport const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {\n  const {\n    $size, $fontSize, $animationVariant, $duration, $delay, $loop,\n    $glow, $glowColor, $customColor, $shadow, $ripple, $neon,\n  } = flags;\n\n  const color = $customColor || theme.palette.primary.main;\n  const glowColor = $glowColor || color;\n  const animation = animationFor($animationVariant, $duration, $delay, $loop);\n\n  // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,\n  // a bare child renders an svg.\n  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };\n\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: $size,\n    height: $size,\n    color,\n    animation,\n    position: 'relative' as const,\n    cursor: 'default',\n    borderRadius: '50%',\n    transition: 'all 0.3s ease',\n    boxShadow: SHADOWS[$shadow ?? 'none']?.(theme) ?? 'none',\n    ...($glow && {\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: -8,\n        borderRadius: '50%',\n        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,\n        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,\n        zIndex: -1,\n      },\n      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`,\n    }),\n    ...effectStyles(theme, flags, animation, color),\n    ...($ripple && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: 0,\n        borderRadius: '50%',\n        border: `2px solid ${color}`,\n        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`,\n      },\n    }),\n    '& .MuiSvgIcon-root': glyphSize,\n    '& svg': glyphSize,\n    '&:hover': {\n      transform: 'scale(1.05)',\n      filter: $neon ? `brightness(1.4) contrast(1.3)` : undefined,\n    },\n  };\n};\n"],"mappings":"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","names":[]}