@12-apps/ui 5.0.0 → 5.1.0

package/components-catalog.md

@@ -542,6 +542,13 @@ Components for structuring and organizing page layouts.
 **Location**: `src/components/layout/Separator`
 **Docs**: `src/components/layout/Separator/Separator.md`
 
+### SettingsLayout
+**Purpose**: Two-pane settings shell — searchable grouped rail + central panel
+**Use Cases**: Any "Configuração"/Settings area with many sections and its own routes
+**Features**: Grouped searchable rail, host-resolved situation markers (ok/off/new/locked), `switcher` or list→detail `drilldown` on narrow widths, always-mounted section chip strip that scrolls itself to the open section, configurable rail breakpoint, empty-search state carrying its own exit
+**Location**: `src/components/layout/SettingsLayout`
+**Docs**: `src/components/layout/SettingsLayout/SettingsLayout.md`
+
 ### Sidebar
 **Purpose**: Application sidebar navigation
 **Use Cases**: App navigation, menu structure, collapsible navigation

package/dist/button.js

@@ -0,0 +1,19 @@
+import "./chunk-PZ5AY32C.js";
+
+// src/button/button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button({ children, className, appName }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      onClick: () => alert(`Hello from your ${appName} app!`),
+      children
+    }
+  );
+}
+export {
+  Button
+};
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\n\ninterface ButtonProps {\n  children: ReactNode;\n  className?: string;\n  appName: string;\n}\n\nexport function Button({ children, className, appName }: ButtonProps): React.JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      className={className}\n      onClick={() => alert(`Hello from your ${appName} app!`)}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":";;;AAaI;AAFG,SAAS,OAAO,EAAE,UAAU,WAAW,QAAQ,GAAmC;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,SAAS,MAAM,MAAM,mBAAmB,OAAO,OAAO;AAAA,MAErD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/charts.js

@@ -0,0 +1,39 @@
+import {
+  CHART_SEMANTIC_COLORS,
+  Chart,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartSpecError,
+  ChartTooltip,
+  ChartTooltipContent,
+  SpecChart,
+  chartValueFormatter,
+  formatChartValue,
+  getChartSpecRenderer,
+  getRegisteredChartSpecTypes,
+  parseChartSpec,
+  registerChartSpecRenderer,
+  specToChartProps
+} from "./chunk-MXVO2KXV.js";
+import "./chunk-OZCEKQIX.js";
+import "./chunk-PZ5AY32C.js";
+export {
+  CHART_SEMANTIC_COLORS,
+  Chart,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartSpecError,
+  ChartTooltip,
+  ChartTooltipContent,
+  SpecChart,
+  chartValueFormatter,
+  formatChartValue,
+  getChartSpecRenderer,
+  getRegisteredChartSpecTypes,
+  parseChartSpec,
+  registerChartSpecRenderer,
+  specToChartProps
+};
+//# sourceMappingURL=charts.js.map

package/dist/chunk-2S2SB5C7.js

@@ -0,0 +1,145 @@
+import {
+  Skeleton
+} from "./chunk-7XUYRPRQ.js";
+
+// src/components/data-display/LoadingState/LoadingState.tsx
+import { Box, CircularProgress, Stack, Typography, useTheme } from "@mui/material";
+import React from "react";
+
+// src/components/data-display/LoadingState/LoadingState.helpers.ts
+var SIZE_MAP = {
+  xs: { spinner: 16, text: "body2" },
+  sm: { spinner: 24, text: "body2" },
+  md: { spinner: 40, text: "body1" },
+  lg: { spinner: 56, text: "h6" },
+  xl: { spinner: 64, text: "h6" }
+};
+var SKELETON_ROW_HEIGHT = {
+  xs: 14,
+  sm: 20,
+  md: 28,
+  lg: 36,
+  xl: 44
+};
+var LOADING_STATE_DEFAULTS = {
+  variant: "spinner",
+  size: "md",
+  skeletonRows: 3
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveLoadingStateProps = (props) => ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) });
+var makeTestIds = (dataTestId) => ({
+  base: dataTestId || "loading-state",
+  optional: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0,
+  named: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`
+});
+
+// src/components/data-display/LoadingState/LoadingState.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var LoadingMessage = ({ message, size, testIds, sx }) => message ? /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: SIZE_MAP[size].text,
+    color: "text.secondary",
+    sx,
+    "data-testid": testIds.named("message"),
+    children: message
+  }
+) : null;
+var SkeletonView = ({
+  message,
+  size,
+  skeletonRows,
+  className,
+  testIds
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading content",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        width: "100%",
+        padding: theme.spacing(3)
+      },
+      children: [
+        /* @__PURE__ */ jsx(Stack, { spacing: 2, children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangular",
+            animation: "wave",
+            height: SKELETON_ROW_HEIGHT[size],
+            width: index === skeletonRows - 1 ? "60%" : "100%",
+            borderRadius: 4,
+            "data-testid": testIds.optional(`skeleton-${index}`)
+          },
+          `skeleton-row-${index}`
+        )) }),
+        /* @__PURE__ */ jsx(
+          LoadingMessage,
+          {
+            message,
+            size,
+            testIds,
+            sx: { mt: 2, textAlign: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+var SpinnerView = ({ message, size, className, testIds }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: theme.spacing(6),
+        minHeight: 200,
+        gap: theme.spacing(2)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            size: SIZE_MAP[size].spinner,
+            "data-testid": testIds.named("spinner")
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
+      ]
+    }
+  );
+};
+var LoadingState = React.memo((rawProps) => {
+  const { variant, message, size, skeletonRows, className, dataTestId } = resolveLoadingStateProps(rawProps);
+  const viewProps = {
+    message,
+    size,
+    skeletonRows,
+    className,
+    testIds: makeTestIds(dataTestId)
+  };
+  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...viewProps }) : /* @__PURE__ */ jsx(SpinnerView, { ...viewProps });
+});
+LoadingState.displayName = "LoadingState";
+
+export {
+  LoadingState
+};
+//# sourceMappingURL=chunk-2S2SB5C7.js.map

package/dist/chunk-2S2SB5C7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LoadingState/LoadingState.tsx","../src/components/data-display/LoadingState/LoadingState.helpers.ts"],"sourcesContent":["import { Box, CircularProgress, Stack, Typography, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport {\n  makeTestIds,\n  resolveLoadingStateProps,\n  SIZE_MAP,\n  SKELETON_ROW_HEIGHT,\n} from './LoadingState.helpers';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\n\ninterface ViewProps {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  className?: string;\n  testIds: ReturnType<typeof makeTestIds>;\n}\n\nconst LoadingMessage: React.FC<{\n  message?: string;\n  size: LoadingStateSize;\n  testIds: ViewProps['testIds'];\n  sx?: object;\n}> = ({ message, size, testIds, sx }) =>\n  message ? (\n    <Typography\n      variant={SIZE_MAP[size].text}\n      color=\"text.secondary\"\n      sx={sx}\n      data-testid={testIds.named('message')}\n    >\n      {message}\n    </Typography>\n  ) : null;\n\nconst SkeletonView: React.FC<ViewProps> = ({\n  message,\n  size,\n  skeletonRows,\n  className,\n  testIds,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading content'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        width: '100%',\n        padding: theme.spacing(3),\n      }}\n    >\n      <Stack spacing={2}>\n        {Array.from({ length: skeletonRows }).map((_, index) => (\n          <Skeleton\n            key={`skeleton-row-${index}`}\n            variant=\"rectangular\"\n            animation=\"wave\"\n            height={SKELETON_ROW_HEIGHT[size]}\n            // The last row is short, so the block reads as a paragraph of text.\n            width={index === skeletonRows - 1 ? '60%' : '100%'}\n            borderRadius={4}\n            data-testid={testIds.optional(`skeleton-${index}`)}\n          />\n        ))}\n      </Stack>\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        sx={{ mt: 2, textAlign: 'center' }}\n      />\n    </Box>\n  );\n};\n\nconst SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: theme.spacing(6),\n        minHeight: 200,\n        gap: theme.spacing(2),\n      }}\n    >\n      <CircularProgress\n        size={SIZE_MAP[size].spinner}\n        data-testid={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </Box>\n  );\n};\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) => {\n  const { variant, message, size, skeletonRows, className, dataTestId } =\n    resolveLoadingStateProps(rawProps);\n  const viewProps: ViewProps = {\n    message,\n    size,\n    skeletonRows,\n    className,\n    testIds: makeTestIds(dataTestId),\n  };\n\n  return variant === 'skeleton' ? (\n    <SkeletonView {...viewProps} />\n  ) : (\n    <SpinnerView {...viewProps} />\n  );\n});\n\nLoadingState.displayName = 'LoadingState';\n\nexport default LoadingState;\n","import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\n\nexport const SIZE_MAP: Record<\n  LoadingStateSize,\n  { spinner: number; text: 'body2' | 'body1' | 'h6' }\n> = {\n  xs: { spinner: 16, text: 'body2' },\n  sm: { spinner: 24, text: 'body2' },\n  md: { spinner: 40, text: 'body1' },\n  lg: { spinner: 56, text: 'h6' },\n  xl: { spinner: 64, text: 'h6' },\n};\n\nexport const SKELETON_ROW_HEIGHT: Record<LoadingStateSize, number> = {\n  xs: 14,\n  sm: 20,\n  md: 28,\n  lg: 36,\n  xl: 44,\n};\n\ntype LoadingStateDefaultedKeys = 'variant' | 'size' | 'skeletonRows';\n\ntype ResolvedLoadingStateProps = LoadingStateProps &\n  Required<Pick<LoadingStateProps, LoadingStateDefaultedKeys>>;\n\nconst LOADING_STATE_DEFAULTS: Pick<LoadingStateProps, LoadingStateDefaultedKeys> = {\n  variant: 'spinner',\n  size: 'md',\n  skeletonRows: 3,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: LoadingStateProps): Partial<LoadingStateProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<LoadingStateProps>;\n\nexport const resolveLoadingStateProps = (\n  props: LoadingStateProps,\n): ResolvedLoadingStateProps =>\n  ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) }) as ResolvedLoadingStateProps;\n\n/**\n * Test ids come in three flavours here: the container falls back to a bare\n * `loading-state`, the labelled parts to `loading-state-<part>`, and the\n * skeleton rows to nothing at all when the caller supplied no base id.\n */\nexport const makeTestIds = (dataTestId?: string) => ({\n  base: dataTestId || 'loading-state',\n  optional: (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined,\n  named: (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`,\n});\n"],"mappings":";;;;;AAAA,SAAS,KAAK,kBAAkB,OAAO,YAAY,gBAAgB;AACnE,OAAO,WAAW;;;ACCX,IAAM,WAGT;AAAA,EACF,IAAI,EAAE,SAAS,IAAI,MAAM,QAAQ;AAAA,EACjC,IAAI,EAAE,SAAS,IAAI,MAAM,QAAQ;AAAA,EACjC,IAAI,EAAE,SAAS,IAAI,MAAM,QAAQ;AAAA,EACjC,IAAI,EAAE,SAAS,IAAI,MAAM,KAAK;AAAA,EAC9B,IAAI,EAAE,SAAS,IAAI,MAAM,KAAK;AAChC;AAEO,IAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAOA,IAAM,yBAA6E;AAAA,EACjF,SAAS;AAAA,EACT,MAAM;AAAA,EACN,cAAc;AAChB;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,2BAA2B,CACtC,WAEC,EAAE,GAAG,wBAAwB,GAAG,aAAa,KAAK,EAAE;AAOhD,IAAM,cAAc,CAAC,gBAAyB;AAAA,EACnD,MAAM,cAAc;AAAA,EACpB,UAAU,CAAC,WACT,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK;AAAA,EAC3C,OAAO,CAAC,WACN,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,iBAAiB,MAAM;AACpE;;;AD3BI,cAoBA,YApBA;AAPJ,IAAM,iBAKD,CAAC,EAAE,SAAS,MAAM,SAAS,GAAG,MACjC,UACE;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,SAAS,IAAI,EAAE;AAAA,IACxB,OAAM;AAAA,IACN;AAAA,IACA,eAAa,QAAQ,MAAM,SAAS;AAAA,IAEnC;AAAA;AACH,IACE;AAEN,IAAM,eAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,OAAO;AAAA,QACP,SAAS,MAAM,QAAQ,CAAC;AAAA,MAC1B;AAAA,MAEA;AAAA,4BAAC,SAAM,SAAS,GACb,gBAAM,KAAK,EAAE,QAAQ,aAAa,CAAC,EAAE,IAAI,CAAC,GAAG,UAC5C;AAAA,UAAC;AAAA;AAAA,YAEC,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,QAAQ,oBAAoB,IAAI;AAAA,YAEhC,OAAO,UAAU,eAAe,IAAI,QAAQ;AAAA,YAC5C,cAAc;AAAA,YACd,eAAa,QAAQ,SAAS,YAAY,KAAK,EAAE;AAAA;AAAA,UAP5C,gBAAgB,KAAK;AAAA,QAQ5B,CACD,GACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAI,EAAE,IAAI,GAAG,WAAW,SAAS;AAAA;AAAA,QACnC;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAmC,CAAC,EAAE,SAAS,MAAM,WAAW,QAAQ,MAAM;AAClF,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS,MAAM,QAAQ,CAAC;AAAA,QACxB,WAAW;AAAA,QACX,KAAK,MAAM,QAAQ,CAAC;AAAA,MACtB;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,IAAI,EAAE;AAAA,YACrB,eAAa,QAAQ,MAAM,SAAS;AAAA;AAAA,QACtC;AAAA,QACA,oBAAC,kBAAe,SAAkB,MAAY,SAAkB;AAAA;AAAA;AAAA,EAClE;AAEJ;AAEO,IAAM,eAA4C,MAAM,KAAK,CAAC,aAAa;AAChF,QAAM,EAAE,SAAS,SAAS,MAAM,cAAc,WAAW,WAAW,IAClE,yBAAyB,QAAQ;AACnC,QAAM,YAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,YAAY,UAAU;AAAA,EACjC;AAEA,SAAO,YAAY,aACjB,oBAAC,gBAAc,GAAG,WAAW,IAE7B,oBAAC,eAAa,GAAG,WAAW;AAEhC,CAAC;AAED,aAAa,cAAc;","names":[]}

package/dist/chunk-2XFGVZTZ.js

@@ -0,0 +1,449 @@
+// src/components/data-display/Avatar/Avatar.tsx
+import BrokenImage from "@mui/icons-material/BrokenImage";
+import Person from "@mui/icons-material/Person";
+import { styled as styled2 } from "@mui/material";
+import React, { useCallback, useEffect, useState } from "react";
+
+// src/components/data-display/Avatar/Avatar.view.tsx
+import { alpha, Avatar as MuiAvatar, Badge, Fade, keyframes, useTheme } from "@mui/material";
+import { styled } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 10px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var shimmerAnimation = keyframes`
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`;
+var scaleInAnimation = keyframes`
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var rotateAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var getColorFromTheme = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    // `danger`, not `error`. This map was keyed on MUI's word while the prop
+    // took the house one, so `danger` matched nothing and fell through to
+    // primary — a red avatar rendering blue, silently.
+    danger: theme.palette.error,
+    neutral: { main: theme.palette.grey[700], contrastText: "#fff" }
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getSizeStyles = (size) => {
+  const sizeMap = {
+    xs: { width: 24, height: 24, fontSize: "0.75rem" },
+    sm: { width: 32, height: 32, fontSize: "0.875rem" },
+    md: { width: 40, height: 40, fontSize: "1rem" },
+    lg: { width: 48, height: 48, fontSize: "1.125rem" },
+    xl: { width: 64, height: 64, fontSize: "1.5rem" },
+    xxl: { width: 80, height: 80, fontSize: "2rem" }
+  };
+  return sizeMap[size] || sizeMap.md;
+};
+var getStatusColor = (status, theme) => {
+  const statusColorMap = {
+    online: theme.palette.success.main,
+    offline: theme.palette.grey[500],
+    away: theme.palette.warning.main,
+    busy: theme.palette.error.main
+  };
+  return statusColorMap[status] || statusColorMap.offline;
+};
+var interactiveStyles = (interactive, main) => interactive ? {
+  "&:hover": {
+    transform: "scale(1.1) translateY(-2px)",
+    boxShadow: `0 8px 20px ${alpha(main, 0.3)}`,
+    filter: "brightness(1.1)",
+    zIndex: 10
+  },
+  "&:active": { transform: "scale(1.05)" }
+} : {};
+var loadingStyles = (isLoading, main) => isLoading ? {
+  background: `linear-gradient(
+        90deg,
+        ${alpha(main, 0.6)},
+        ${alpha(main, 0.8)},
+        ${alpha(main, 0.6)}
+      )`,
+  backgroundSize: "200% 100%",
+  animation: `${shimmerAnimation} 1.5s ease-in-out infinite`
+} : {};
+var variantRadius = (variant, theme) => {
+  if (variant === "square") return { borderRadius: 0 };
+  if (variant === "rounded") return { borderRadius: theme.spacing(1) };
+  return { borderRadius: "50%" };
+};
+var borderedStyles = (bordered, theme) => bordered ? {
+  border: `2px solid ${theme.palette.background.paper}`,
+  boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, 0.2)}`
+} : {};
+var glowPulseStyles = (glow, pulse, main) => {
+  const styles = {};
+  if (glow) {
+    styles.boxShadow = `0 0 20px 5px ${alpha(main, 0.4)} !important`;
+    styles.filter = "brightness(1.05)";
+  }
+  if (pulse) {
+    styles.position = "relative";
+    styles["&::after"] = {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: "100%",
+      height: "100%",
+      borderRadius: "inherit",
+      transform: "translate(-50%, -50%)",
+      backgroundColor: main,
+      opacity: 0.3,
+      animation: `${pulseAnimation} 2s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    };
+  }
+  return styles;
+};
+var STYLED_AVATAR_PROPS = [
+  "customVariant",
+  "customSize",
+  "customColor",
+  "glow",
+  "pulse",
+  "bordered",
+  "isLoading",
+  "hasError",
+  "interactive"
+];
+var StyledAvatar = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => !STYLED_AVATAR_PROPS.includes(prop)
+})(
+  ({
+    theme,
+    customVariant,
+    customSize = "md",
+    customColor = "primary",
+    glow,
+    pulse,
+    bordered,
+    isLoading,
+    hasError,
+    interactive
+  }) => {
+    const palette = getColorFromTheme(theme, customColor);
+    return {
+      ...getSizeStyles(customSize),
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      position: "relative",
+      overflow: "visible",
+      animation: `${scaleInAnimation} 0.3s ease-out`,
+      cursor: interactive ? "pointer" : "default",
+      backgroundColor: hasError ? theme.palette.error.main : palette.main,
+      color: hasError ? theme.palette.error.contrastText : palette.contrastText ?? "#fff",
+      ...interactiveStyles(interactive, palette.main),
+      ...loadingStyles(isLoading, palette.main),
+      ...variantRadius(customVariant, theme),
+      ...borderedStyles(bordered, theme),
+      ...glowPulseStyles(glow, pulse, palette.main),
+      "&:focus-visible": {
+        outline: `3px solid ${alpha(palette.main, 0.5)}`,
+        outlineOffset: 2
+      }
+    };
+  }
+);
+var LoadingOverlay = styled("div")(({ theme, size }) => {
+  const sizeStyles = getSizeStyles(size);
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: sizeStyles.width,
+    height: sizeStyles.height,
+    borderRadius: "inherit",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: alpha(theme.palette.background.paper, 0.7),
+    backdropFilter: "blur(2px)",
+    "& .loading-spinner": {
+      width: sizeStyles.width * 0.4,
+      height: sizeStyles.height * 0.4,
+      border: `2px solid ${alpha(theme.palette.primary.main, 0.3)}`,
+      borderTopColor: theme.palette.primary.main,
+      borderRadius: "50%",
+      animation: `${rotateAnimation} 0.8s linear infinite`
+    }
+  };
+});
+var StatusBadge = styled(Badge, {
+  shouldForwardProp: (prop) => !["statusColor", "avatarSize"].includes(prop)
+})(({ theme, statusColor, avatarSize = "md" }) => {
+  const sizeStyles = getSizeStyles(avatarSize);
+  const badgeSize = Math.max(8, sizeStyles.width * 0.2);
+  return {
+    "& .MuiBadge-badge": {
+      backgroundColor: statusColor || theme.palette.success.main,
+      color: statusColor || theme.palette.success.main,
+      width: badgeSize,
+      height: badgeSize,
+      borderRadius: "50%",
+      border: `2px solid ${theme.palette.background.paper}`,
+      "&::after": {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        content: '""'
+      }
+    }
+  };
+});
+function AvatarSurface(props) {
+  const { showSpinner, dataTestId, clickable } = props;
+  const testId = (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+  return /* @__PURE__ */ jsx(Fade, { in: props.mounted, timeout: 300, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx(
+      StyledAvatar,
+      {
+        ref: props.forwardedRef,
+        className: props.className,
+        customVariant: props.variant,
+        customSize: props.size,
+        customColor: props.color,
+        glow: props.glow,
+        pulse: props.pulse,
+        bordered: props.bordered,
+        isLoading: showSpinner,
+        hasError: props.imageError,
+        interactive: clickable,
+        src: props.imgSrc,
+        alt: props.alt,
+        onClick: props.onClick,
+        tabIndex: clickable ? 0 : void 0,
+        role: clickable ? "button" : void 0,
+        "aria-label": props.ariaLabel,
+        "data-testid": dataTestId,
+        ...props.rest,
+        slotProps: { img: { onError: props.handleImageError, onLoad: props.handleImageLoad } },
+        children: showSpinner ? null : /* @__PURE__ */ jsx("span", { "data-testid": testId(props.contentType), children: props.content })
+      }
+    ),
+    showSpinner && /* @__PURE__ */ jsx(LoadingOverlay, { size: props.size, "data-testid": testId("loading"), children: /* @__PURE__ */ jsx("div", { className: "loading-spinner", "data-testid": testId("loading-spinner") }) })
+  ] }) });
+}
+function AvatarView(props) {
+  const theme = useTheme();
+  const surface = /* @__PURE__ */ jsx(AvatarSurface, { ...props });
+  if (props.variant === "status" && props.status) {
+    return /* @__PURE__ */ jsx(
+      StatusBadge,
+      {
+        overlap: "circular",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        variant: "dot",
+        statusColor: getStatusColor(props.status, theme),
+        avatarSize: props.size,
+        "data-testid": props.dataTestId ? `${props.dataTestId}-badge` : void 0,
+        children: surface
+      }
+    );
+  }
+  return surface;
+}
+
+// src/components/data-display/Avatar/Avatar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var AVATAR_DEFAULTS = {
+  variant: "circle",
+  size: "md",
+  glow: false,
+  pulse: false,
+  bordered: false,
+  color: "primary",
+  loading: false,
+  interactive: false,
+  showFallbackOnError: true,
+  animationDelay: 0
+};
+function resolveContent(args) {
+  const { children, fallback, icon, imageError, showFallbackOnError } = args;
+  if (imageError && showFallbackOnError) {
+    if (fallback) return { content: fallback, contentType: "fallback" };
+    if (icon) return { content: icon, contentType: "icon" };
+    return { content: /* @__PURE__ */ jsx2(BrokenImage, {}), contentType: "icon" };
+  }
+  if (children) return { content: children, contentType: "children" };
+  if (fallback) return { content: fallback, contentType: "fallback" };
+  if (icon) return { content: icon, contentType: "icon" };
+  return { content: /* @__PURE__ */ jsx2(Person, {}), contentType: "default" };
+}
+function useMountedFade(animationDelay) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const timer = window.setTimeout(() => setMounted(true), animationDelay);
+    return () => window.clearTimeout(timer);
+  }, [animationDelay]);
+  return mounted;
+}
+function useImageState(src, onError) {
+  const [imageError, setImageError] = useState(false);
+  const [imageLoading, setImageLoading] = useState(!!src);
+  useEffect(() => {
+    setImageError(false);
+    setImageLoading(!!src);
+  }, [src]);
+  const handleImageError = useCallback(
+    (event) => {
+      setImageError(true);
+      setImageLoading(false);
+      onError?.(event);
+    },
+    [onError]
+  );
+  const handleImageLoad = useCallback(() => setImageLoading(false), []);
+  return { imageError, imageLoading, handleImageError, handleImageLoad };
+}
+function useAvatarModel(raw, ref) {
+  const {
+    variant,
+    size,
+    glow,
+    pulse,
+    status,
+    fallback,
+    icon,
+    bordered,
+    color,
+    src,
+    alt,
+    children,
+    loading,
+    onError,
+    onClick,
+    interactive,
+    showFallbackOnError,
+    animationDelay,
+    className,
+    dataTestId,
+    ...rest
+  } = { ...AVATAR_DEFAULTS, ...raw };
+  const mounted = useMountedFade(animationDelay);
+  const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);
+  const handleClick = useCallback(
+    (event) => onClick?.(event),
+    [onClick]
+  );
+  const { content, contentType } = resolveContent({
+    children,
+    fallback,
+    icon,
+    imageError,
+    showFallbackOnError
+  });
+  return {
+    mounted,
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    bordered,
+    showSpinner: loading || imageLoading,
+    imageError,
+    clickable: interactive || !!onClick,
+    imgSrc: imageError ? void 0 : src,
+    alt,
+    ariaLabel: rest["aria-label"] || alt || "Avatar",
+    content,
+    contentType,
+    className,
+    dataTestId,
+    status,
+    forwardedRef: ref,
+    onClick: handleClick,
+    handleImageError,
+    handleImageLoad,
+    rest
+  };
+}
+var Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsx2(AvatarView, { ...useAvatarModel(props, ref) }));
+Avatar.displayName = "Avatar";
+var AvatarGroupContainer = styled2("div")(({ theme, overlap = 8 }) => ({
+  display: "flex",
+  alignItems: "center",
+  "& > *": {
+    marginLeft: -overlap,
+    transition: "all 0.3s ease",
+    position: "relative",
+    border: `2px solid ${theme.palette.background.paper}`,
+    "&:hover": {
+      zIndex: 100,
+      transform: "scale(1.1) translateY(-4px)"
+    },
+    "&:first-of-type": {
+      marginLeft: 0
+    }
+  }
+}));
+var AvatarGroup = ({ children, max = 4, overlap = 8, className, dataTestId }) => {
+  const childrenArray = React.Children.toArray(children);
+  const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
+  const remainingCount = childrenArray.length - visibleChildren.length;
+  return /* @__PURE__ */ jsxs2(AvatarGroupContainer, { overlap, className, "data-testid": dataTestId, children: [
+    visibleChildren,
+    remainingCount > 0 && /* @__PURE__ */ jsx2(
+      Avatar,
+      {
+        size: visibleChildren[0]?.props?.size || "md",
+        color: "neutral",
+        fallback: `+${remainingCount}`,
+        bordered: true,
+        dataTestId: dataTestId ? `${dataTestId}-overflow` : void 0
+      }
+    )
+  ] });
+};
+AvatarGroup.displayName = "AvatarGroup";
+
+export {
+  Avatar,
+  AvatarGroup
+};
+//# sourceMappingURL=chunk-2XFGVZTZ.js.map