@12-apps/ui 5.0.0 → 5.1.0

package/dist/chunk-7XUYRPRQ.js

@@ -0,0 +1,158 @@
+// src/components/layout/Skeleton/Skeleton.tsx
+import { Box, Skeleton as MuiSkeleton, Stack, useTheme } from "@mui/material";
+import React from "react";
+
+// src/components/layout/Skeleton/Skeleton.helpers.ts
+var SKELETON_DEFAULTS = {
+  variant: "text",
+  animation: "pulse",
+  count: 1,
+  spacing: 1,
+  intensity: "medium",
+  glassmorphism: false,
+  shimmer: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveSkeletonProps = (props) => ({ ...SKELETON_DEFAULTS, ...definedProps(props) });
+
+// src/components/layout/Skeleton/Skeleton.styles.ts
+import { alpha } from "@mui/material";
+var muiVariantFor = (variant) => {
+  switch (variant) {
+    case "circular":
+      return "circular";
+    case "rectangular":
+    case "wave":
+      return "rectangular";
+    default:
+      return "text";
+  }
+};
+var muiAnimationFor = (variant, animation) => {
+  if (variant === "wave") return "wave";
+  return animation;
+};
+var defaultDimensions = (variant) => {
+  switch (variant) {
+    case "circular":
+      return { width: 40, height: 40 };
+    case "rectangular":
+    case "wave":
+      return { width: "100%", height: 40 };
+    default:
+      return { width: "100%", height: void 0 };
+  }
+};
+var INTENSITY_OPACITY = {
+  low: 0.11,
+  medium: 0.13,
+  high: 0.15
+};
+var intensityOpacity = (intensity) => INTENSITY_OPACITY[intensity] ?? INTENSITY_OPACITY.medium;
+var glassmorphismStyles = (theme) => ({
+  background: `linear-gradient(135deg,
+        ${alpha(theme.palette.background.paper, 0.8)} 0%,
+        ${alpha(theme.palette.background.paper, 0.4)} 100%)`,
+  backdropFilter: "blur(20px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  boxShadow: `0 8px 32px 0 ${alpha(theme.palette.common.black, 0.1)}`
+});
+var shimmerStyles = (theme) => ({
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    background: `linear-gradient(
+          90deg,
+          transparent,
+          ${alpha(theme.palette.common.white, 0.3)},
+          transparent
+        )`,
+    transform: "translateX(-100%)",
+    animation: "shimmer 2s infinite"
+  },
+  "@keyframes shimmer": {
+    "100%": {
+      transform: "translateX(100%)"
+    }
+  }
+});
+var skeletonStyles = (theme, { intensity, borderRadius, glassmorphism, shimmer, style }) => ({
+  borderRadius,
+  backgroundColor: alpha(
+    theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.text.primary,
+    intensityOpacity(intensity)
+  ),
+  ...shimmer && {
+    position: "relative",
+    overflow: "hidden"
+  },
+  ...glassmorphism ? glassmorphismStyles(theme) : {},
+  ...shimmer ? shimmerStyles(theme) : {},
+  ...style
+});
+
+// src/components/layout/Skeleton/Skeleton.tsx
+import { jsx } from "react/jsx-runtime";
+var Skeleton = React.memo((rawProps) => {
+  const {
+    variant,
+    animation,
+    width,
+    height,
+    count,
+    spacing,
+    borderRadius,
+    className,
+    intensity,
+    glassmorphism,
+    shimmer,
+    "data-testid": dataTestId,
+    style,
+    ...props
+  } = resolveSkeletonProps(rawProps);
+  const theme = useTheme();
+  const defaults = defaultDimensions(variant);
+  const finalWidth = width ?? defaults.width;
+  const finalHeight = height ?? defaults.height;
+  if (count === 0) {
+    return null;
+  }
+  const singleSkeleton = /* @__PURE__ */ jsx(
+    MuiSkeleton,
+    {
+      variant: muiVariantFor(variant),
+      animation: muiAnimationFor(variant, animation),
+      width: finalWidth,
+      height: finalHeight,
+      sx: skeletonStyles(theme, {
+        intensity,
+        borderRadius,
+        glassmorphism,
+        shimmer,
+        style
+      }),
+      className,
+      "data-testid": dataTestId,
+      "aria-hidden": "true",
+      ...props
+    }
+  );
+  if (count === 1) {
+    return singleSkeleton;
+  }
+  return /* @__PURE__ */ jsx(Stack, { spacing, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(Box, { children: React.cloneElement(singleSkeleton, {
+    "data-testid": dataTestId ? `${dataTestId}-${index}` : void 0
+  }) }, `skeleton-${index}`)) });
+});
+Skeleton.displayName = "Skeleton";
+
+export {
+  Skeleton
+};
+//# sourceMappingURL=chunk-7XUYRPRQ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.tsx","../src/components/layout/Skeleton/Skeleton.helpers.ts","../src/components/layout/Skeleton/Skeleton.styles.ts"],"sourcesContent":["import { Box, Skeleton as MuiSkeleton, Stack, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { resolveSkeletonProps } from './Skeleton.helpers';\nimport {\n  defaultDimensions,\n  muiAnimationFor,\n  muiVariantFor,\n  skeletonStyles,\n} from './Skeleton.styles';\nimport type { SkeletonProps } from './Skeleton.types';\n\nexport const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {\n  const {\n    variant,\n    animation,\n    width,\n    height,\n    count,\n    spacing,\n    borderRadius,\n    className,\n    intensity,\n    glassmorphism,\n    shimmer,\n    'data-testid': dataTestId,\n    style,\n    ...props\n  } = resolveSkeletonProps(rawProps);\n  const theme = useTheme();\n\n  const defaults = defaultDimensions(variant);\n  const finalWidth = width ?? defaults.width;\n  const finalHeight = height ?? defaults.height;\n\n  // Handle edge case: count of 0 should render nothing\n  if (count === 0) {\n    return null;\n  }\n\n  const singleSkeleton = (\n    <MuiSkeleton\n      variant={muiVariantFor(variant)}\n      animation={muiAnimationFor(variant, animation)}\n      width={finalWidth}\n      height={finalHeight}\n      sx={skeletonStyles(theme, {\n        intensity,\n        borderRadius,\n        glassmorphism,\n        shimmer,\n        style,\n      })}\n      className={className}\n      data-testid={dataTestId}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  );\n\n  if (count === 1) {\n    return singleSkeleton;\n  }\n\n  return (\n    <Stack spacing={spacing}>\n      {Array.from({ length: count }).map((_, index) => (\n        <Box key={`skeleton-${index}`}>\n          {React.cloneElement(singleSkeleton, {\n            'data-testid': dataTestId ? `${dataTestId}-${index}` : undefined,\n          })}\n        </Box>\n      ))}\n    </Stack>\n  );\n});\n\nSkeleton.displayName = 'Skeleton';","import type { SkeletonProps } from './Skeleton.types';\n\ntype SkeletonDefaultedKeys =\n  | 'variant'\n  | 'animation'\n  | 'count'\n  | 'spacing'\n  | 'intensity'\n  | 'glassmorphism'\n  | 'shimmer';\n\ntype ResolvedSkeletonProps = SkeletonProps &\n  Required<Pick<SkeletonProps, SkeletonDefaultedKeys>>;\n\nconst SKELETON_DEFAULTS: Pick<SkeletonProps, SkeletonDefaultedKeys> = {\n  variant: 'text',\n  animation: 'pulse',\n  count: 1,\n  spacing: 1,\n  intensity: 'medium',\n  glassmorphism: false,\n  shimmer: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `count={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: SkeletonProps): Partial<SkeletonProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<SkeletonProps>;\n\nexport const resolveSkeletonProps = (props: SkeletonProps): ResolvedSkeletonProps =>\n  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps;\n","import { alpha } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\nimport type { SkeletonProps } from './Skeleton.types';\n\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\ntype SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;\n\n/** `wave` is our own name for a rectangle that animates; MUI has no such variant. */\nexport const muiVariantFor = (\n  variant: SkeletonVariant,\n): 'circular' | 'rectangular' | 'text' => {\n  switch (variant) {\n    case 'circular':\n      return 'circular';\n    case 'rectangular':\n    case 'wave':\n      return 'rectangular';\n    default:\n      return 'text';\n  }\n};\n\nexport const muiAnimationFor = (\n  variant: SkeletonVariant,\n  animation: SkeletonProps['animation'],\n) => {\n  if (variant === 'wave') return 'wave';\n  return animation;\n};\n\nexport const defaultDimensions = (\n  variant: SkeletonVariant,\n): { width: number | string; height: number | undefined } => {\n  switch (variant) {\n    case 'circular':\n      return { width: 40, height: 40 };\n    case 'rectangular':\n    case 'wave':\n      return { width: '100%', height: 40 };\n    default:\n      return { width: '100%', height: undefined };\n  }\n};\n\nconst INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {\n  low: 0.11,\n  medium: 0.13,\n  high: 0.15,\n};\n\nconst intensityOpacity = (intensity: SkeletonIntensity): number =>\n  INTENSITY_OPACITY[intensity] ?? INTENSITY_OPACITY.medium;\n\nconst glassmorphismStyles = (theme: Theme): CSSObject => ({\n  background: `linear-gradient(135deg,\n        ${alpha(theme.palette.background.paper, 0.8)} 0%,\n        ${alpha(theme.palette.background.paper, 0.4)} 100%)`,\n  backdropFilter: 'blur(20px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  boxShadow: `0 8px 32px 0 ${alpha(theme.palette.common.black, 0.1)}`,\n});\n\n// The sweep is a pseudo-element sliding across the box, so the box has to clip it\n// and establish a positioning context — hence `position`/`overflow` below.\nconst shimmerStyles = (theme: Theme): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    background: `linear-gradient(\n          90deg,\n          transparent,\n          ${alpha(theme.palette.common.white, 0.3)},\n          transparent\n        )`,\n    transform: 'translateX(-100%)',\n    animation: 'shimmer 2s infinite',\n  },\n  '@keyframes shimmer': {\n    '100%': {\n      transform: 'translateX(100%)',\n    },\n  },\n});\n\ninterface SkeletonStyleArgs {\n  intensity: SkeletonIntensity;\n  borderRadius?: number | string;\n  glassmorphism: boolean;\n  shimmer: boolean;\n  style?: React.CSSProperties;\n}\n\nexport const skeletonStyles = (\n  theme: Theme,\n  { intensity, borderRadius, glassmorphism, shimmer, style }: SkeletonStyleArgs,\n): CSSObject => ({\n  borderRadius,\n  backgroundColor: alpha(\n    theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.text.primary,\n    intensityOpacity(intensity),\n  ),\n  ...(shimmer && {\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n  }),\n  ...(glassmorphism ? glassmorphismStyles(theme) : {}),\n  ...(shimmer ? shimmerStyles(theme) : {}),\n  ...style,\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-ADCIUZX2.js

@@ -0,0 +1,123 @@
+// src/components/typography/Heading/Heading.tsx
+import { styled } from "@mui/material";
+import React from "react";
+
+// src/components/typography/Heading/Heading.styles.ts
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return theme.palette.text.primary;
+  }
+  const colorMap = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
+    danger: theme.palette.error.main
+  };
+  return colorMap[color];
+};
+var WEIGHTS = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var LEVELS = {
+  display: { fontSize: "4rem", lineHeight: 0.95, letterSpacing: "-0.03em", normalWeight: 800 },
+  h1: { fontSize: "3rem", lineHeight: 1.1, letterSpacing: "-0.02em", normalWeight: 700 },
+  h2: { fontSize: "2.5rem", lineHeight: 1.2, letterSpacing: "-0.015em", normalWeight: 700 },
+  h3: { fontSize: "2rem", lineHeight: 1.25, letterSpacing: "-0.01em", normalWeight: 600 },
+  h4: { fontSize: "1.5rem", lineHeight: 1.3, letterSpacing: "-0.005em", normalWeight: 600 },
+  h5: { fontSize: "1.25rem", lineHeight: 1.4, normalWeight: 600 },
+  h6: { fontSize: "1.125rem", lineHeight: 1.4, normalWeight: 600 }
+};
+var PRIMARY_STOPS = (theme) => [
+  theme.palette.primary.main,
+  theme.palette.secondary.main
+];
+var GRADIENT_STOPS = {
+  primary: PRIMARY_STOPS,
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+  // The grey ramp has no light/dark pair, and every stop on it is
+  // `string | undefined` under `noUncheckedIndexedAccess`.
+  neutral: (theme) => [theme.palette.grey[500] ?? "#9e9e9e", theme.palette.grey[900] ?? "#212121"]
+};
+var gradientFor = (theme, color) => {
+  const [from, to] = GRADIENT_STOPS[color](theme);
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+};
+var headingSx = (theme, flags) => {
+  const { customLevel = "h2", customColor = "neutral", customWeight = "bold", gradient } = flags;
+  const { normalWeight, ...metrics } = LEVELS[customLevel] ?? LEVELS.h2;
+  const base = {
+    fontFamily: theme.typography.h1.fontFamily,
+    margin: 0,
+    transition: "all 0.2s ease",
+    ...metrics,
+    fontWeight: customWeight === "normal" ? normalWeight : WEIGHTS[customWeight] ?? WEIGHTS.bold
+  };
+  if (!gradient) {
+    return { ...base, color: getColorFromTheme(theme, customColor) };
+  }
+  return {
+    ...base,
+    background: gradientFor(theme, customColor),
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    MozBackgroundClip: "text",
+    MozTextFillColor: "transparent"
+  };
+};
+
+// src/components/typography/Heading/Heading.tsx
+import { jsx } from "react/jsx-runtime";
+var styledHeading = () => styled("h1", {
+  shouldForwardProp: (prop) => !["customLevel", "customColor", "customWeight", "gradient"].includes(prop)
+})(({ theme, ...flags }) => ({ ...headingSx(theme, flags) }));
+var STYLED_BY_TAG = {
+  h1: styledHeading().withComponent("h1"),
+  h2: styledHeading().withComponent("h2"),
+  h3: styledHeading().withComponent("h3"),
+  h4: styledHeading().withComponent("h4"),
+  h5: styledHeading().withComponent("h5"),
+  h6: styledHeading().withComponent("h6")
+};
+var TAG_FOR_LEVEL = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6"
+};
+var Heading = React.forwardRef(
+  ({ level = "h2", color = "neutral", weight = "bold", gradient = false, children, ...props }, ref) => {
+    const Styled = STYLED_BY_TAG[TAG_FOR_LEVEL[level] ?? "h2"];
+    return /* @__PURE__ */ jsx(
+      Styled,
+      {
+        ref,
+        customLevel: level,
+        customColor: color,
+        customWeight: weight,
+        gradient,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+
+export {
+  Heading
+};
+//# sourceMappingURL=chunk-ADCIUZX2.js.map

package/dist/chunk-ADCIUZX2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Heading/Heading.tsx","../src/components/typography/Heading/Heading.styles.ts"],"sourcesContent":["import { styled } from '@mui/material';\nimport React from 'react';\n\nimport { headingSx } from './Heading.styles';\nimport type { HeadingFlags } from './Heading.styles';\nimport type { HeadingProps } from './Heading.types';\n\nconst styledHeading = () =>\n  styled('h1', {\n    shouldForwardProp: (prop) =>\n      !['customLevel', 'customColor', 'customWeight', 'gradient'].includes(prop as string),\n  })<HeadingFlags>(({ theme, ...flags }) => ({ ...headingSx(theme, flags) }));\n\n/**\n * One styled component per tag. They share a style function but must be\n * separate components, since `withComponent` fixes the element at definition\n * time — a single component switching tags per render would remount the text.\n */\nconst STYLED_BY_TAG = {\n  h1: styledHeading().withComponent('h1'),\n  h2: styledHeading().withComponent('h2'),\n  h3: styledHeading().withComponent('h3'),\n  h4: styledHeading().withComponent('h4'),\n  h5: styledHeading().withComponent('h5'),\n  h6: styledHeading().withComponent('h6'),\n} as const;\n\n/**\n * Which tag each level renders. `display` is a size, not a rank, so it uses the\n * h1 element — the document still gets one level-one heading rather than an\n * unnamed tag outside the outline.\n */\nconst TAG_FOR_LEVEL: Record<string, keyof typeof STYLED_BY_TAG> = {\n  display: 'h1',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  h6: 'h6',\n};\n\nexport const Heading = React.forwardRef<globalThis.HTMLHeadingElement, HeadingProps>(\n  ({ level = 'h2', color = 'neutral', weight = 'bold', gradient = false, children, ...props }, ref) => {\n    const Styled = STYLED_BY_TAG[TAG_FOR_LEVEL[level] ?? 'h2'];\n\n    return (\n      <Styled\n        ref={ref}\n        customLevel={level}\n        customColor={color}\n        customWeight={weight}\n        gradient={gradient}\n        {...props}\n      >\n        {children}\n      </Styled>\n    );\n  },\n);\n\nHeading.displayName = 'Heading';\n","import type { CSSObject, Theme } from '@mui/material';\n\nimport type { HeadingProps } from './Heading.types';\nimport type { ColorValue } from '../../../tokens/scales';\n\ntype Level = NonNullable<HeadingProps['level']>;\ntype Weight = NonNullable<HeadingProps['weight']>;\n\n// Exhaustive over ColorValue, and deliberately without a fallback. The map\n// happened to hold all seven already, but it was `Record<string, string>` with\n// `|| text.primary` behind it — so nothing kept it that way, and the eighth\n// colour would have rendered as ordinary body text with no complaint. That is\n// the failure this whole vocabulary exists to make impossible; `Text` was\n// tightened the same way and this one was missed.\nconst getColorFromTheme = (theme: Theme, color: ColorValue): string => {\n  if (color === 'neutral') {\n    return theme.palette.text.primary;\n  }\n\n  const colorMap: Record<Exclude<ColorValue, 'neutral'>, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    info: theme.palette.info.main,\n    danger: theme.palette.error.main,\n  };\n\n  return colorMap[color];\n};\n\nconst WEIGHTS: Record<Weight, number> = {\n  light: 300,\n  normal: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\n/**\n * Each level's metrics, plus the weight it uses when the caller asks for\n * `normal`. A heading's \"normal\" is not body text's 400 — it is the weight that\n * level is meant to carry, which gets heavier as the level gets larger.\n */\nconst LEVELS: Record<Level, CSSObject & { normalWeight: number }> = {\n  display: { fontSize: '4rem', lineHeight: 0.95, letterSpacing: '-0.03em', normalWeight: 800 },\n  h1: { fontSize: '3rem', lineHeight: 1.1, letterSpacing: '-0.02em', normalWeight: 700 },\n  h2: { fontSize: '2.5rem', lineHeight: 1.2, letterSpacing: '-0.015em', normalWeight: 700 },\n  h3: { fontSize: '2rem', lineHeight: 1.25, letterSpacing: '-0.01em', normalWeight: 600 },\n  h4: { fontSize: '1.5rem', lineHeight: 1.3, letterSpacing: '-0.005em', normalWeight: 600 },\n  h5: { fontSize: '1.25rem', lineHeight: 1.4, normalWeight: 600 },\n  h6: { fontSize: '1.125rem', lineHeight: 1.4, normalWeight: 600 },\n};\n\n/** The two-stop gradient each colour paints its glyphs with. */\nconst PRIMARY_STOPS = (theme: Theme): [string, string] => [\n  theme.palette.primary.main,\n  theme.palette.secondary.main,\n];\n\n// Keyed over the whole vocabulary, with no `?? PRIMARY_STOPS` behind it. Two\n// stops were missing — `info` and `neutral` — so a gradient heading in either\n// colour painted the PRIMARY gradient and looked deliberate while ignoring the\n// prop entirely. The fallback is what hid it, so the fallback is gone.\nconst GRADIENT_STOPS: Record<ColorValue, (theme: Theme) => [string, string]> = {\n  primary: PRIMARY_STOPS,\n  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],\n  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],\n  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],\n  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],\n  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],\n  // The grey ramp has no light/dark pair, and every stop on it is\n  // `string | undefined` under `noUncheckedIndexedAccess`.\n  neutral: (theme) => [theme.palette.grey[500] ?? '#9e9e9e', theme.palette.grey[900] ?? '#212121'],\n};\n\nconst gradientFor = (theme: Theme, color: ColorValue) => {\n  const [from, to] = GRADIENT_STOPS[color](theme);\n  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;\n};\n\nexport interface HeadingFlags {\n  customLevel?: string;\n  customColor?: ColorValue;\n  customWeight?: string;\n  gradient?: boolean;\n}\n\nexport const headingSx = (theme: Theme, flags: HeadingFlags): CSSObject => {\n  const { customLevel = 'h2', customColor = 'neutral', customWeight = 'bold', gradient } = flags;\n  const { normalWeight, ...metrics } = LEVELS[customLevel as Level] ?? LEVELS.h2;\n\n  const base: CSSObject = {\n    fontFamily: theme.typography.h1.fontFamily,\n    margin: 0,\n    transition: 'all 0.2s ease',\n    ...metrics,\n    fontWeight:\n      customWeight === 'normal' ? normalWeight : (WEIGHTS[customWeight as Weight] ?? WEIGHTS.bold),\n  };\n\n  if (!gradient) {\n    return { ...base, color: getColorFromTheme(theme, customColor) };\n  }\n\n  // The gradient paints the glyphs themselves, so the text must draw no fill of\n  // its own for it to show through.\n  return {\n    ...base,\n    background: gradientFor(theme, customColor),\n    backgroundClip: 'text',\n    WebkitBackgroundClip: 'text',\n    WebkitTextFillColor: 'transparent',\n    MozBackgroundClip: 'text',\n    MozTextFillColor: 'transparent',\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-ANNZ3PLI.js

@@ -0,0 +1,304 @@
+// src/components/form/Button/Button.tsx
+import { Button as MuiButton, CircularProgress } from "@mui/material";
+import { styled } from "@mui/material";
+import * as React from "react";
+
+// src/components/form/Button/Button.helpers.ts
+var BUTTON_DEFAULTS = {
+  variant: "solid",
+  color: "primary",
+  size: "md",
+  loading: false,
+  iconPosition: "left",
+  glow: false,
+  pulse: false,
+  ripple: true,
+  active: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveButtonProps = (props) => ({ ...BUTTON_DEFAULTS, ...definedProps(props) });
+
+// src/components/form/Button/Button.styles.ts
+import { alpha, darken, keyframes, lighten } from "@mui/material";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 15px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var shade = (palette, key, fallback) => palette?.[key] || palette?.main || fallback[key];
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey?.[700] || "#616161",
+  dark: theme.palette.grey?.[800] || "#424242",
+  light: theme.palette.grey?.[500] || "#9e9e9e",
+  contrastText: "#fff"
+});
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") return neutralPalette(theme);
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  const fallback = theme.palette.primary;
+  const palette = colorMap[color] || fallback;
+  return {
+    main: palette?.main || fallback.main,
+    dark: shade(palette, "dark", fallback),
+    light: shade(palette, "light", fallback),
+    contrastText: palette?.contrastText || "#fff"
+  };
+};
+var DEFAULT_SIZE = { padding: "8px 16px", fontSize: "1rem" };
+var SIZE_MAP = {
+  xs: { padding: "2px 8px", fontSize: "0.75rem" },
+  sm: { padding: "6px 12px", fontSize: "0.875rem" },
+  md: DEFAULT_SIZE,
+  lg: { padding: "10px 20px", fontSize: "1.125rem" },
+  xl: { padding: "12px 24px", fontSize: "1.25rem" }
+};
+var ICON_ONLY_PADDING = {
+  xs: "2px",
+  sm: "5px",
+  md: "7px",
+  lg: "9px",
+  xl: "11px"
+};
+var iconOnlySize = (size) => ({
+  minWidth: 0,
+  padding: ICON_ONLY_PADDING[size] ?? ICON_ONLY_PADDING.md,
+  fontSize: SIZE_MAP[size]?.fontSize ?? DEFAULT_SIZE.fontSize,
+  "& .MuiButton-startIcon, & .MuiButton-endIcon": { margin: 0 }
+});
+var buttonSize = (size, iconOnly) => iconOnly ? iconOnlySize(size) : SIZE_MAP[size] ?? DEFAULT_SIZE;
+var iconAlignmentStyles = (theme) => ({
+  "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 0,
+    verticalAlign: "middle",
+    "& > *": {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: 0
+    }
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: theme.spacing(0.5)
+  },
+  "& .MuiButton-endIcon": {
+    marginLeft: theme.spacing(0.5)
+  }
+});
+var GRADIENT_PAIRS = {
+  primary: (theme) => [theme.palette.primary.main, theme.palette.secondary.main],
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark]
+};
+var gradientFor = (theme, color, palette) => {
+  const [from, to] = GRADIENT_PAIRS[color]?.(theme) ?? [palette.main, palette.dark];
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+};
+var quietInk = (theme, palette) => theme.palette.mode === "dark" ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);
+var VARIANT_STYLES = {
+  solid: (theme, palette) => ({
+    backgroundColor: palette.main,
+    color: palette.contrastText || "#fff",
+    "&:hover": {
+      backgroundColor: palette.dark,
+      transform: "translateY(-2px)",
+      boxShadow: theme.shadows[8]
+    }
+  }),
+  outline: (_theme, palette) => ({
+    backgroundColor: "transparent",
+    color: palette.main,
+    border: `1px solid ${palette.main}`,
+    "&:hover": {
+      backgroundColor: alpha(palette.main, 0.1),
+      borderColor: palette.dark
+    }
+  }),
+  ghost: (theme, palette) => ({
+    backgroundColor: "transparent",
+    color: quietInk(theme, palette),
+    "&:hover": {
+      backgroundColor: alpha(palette.main, 0.1)
+    }
+  }),
+  text: (theme, palette) => ({
+    backgroundColor: "transparent",
+    color: quietInk(theme, palette),
+    border: `none`,
+    "&:hover": {
+      backgroundColor: alpha(palette.main, 0.1)
+    },
+    "&.active": {
+      backgroundColor: alpha(palette.main, 0.1),
+      color: quietInk(theme, palette)
+    }
+  }),
+  glass: (theme, palette) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    color: palette.main,
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.background.paper, 0.2),
+      transform: "translateY(-2px)"
+    }
+  }),
+  gradient: (theme, palette, color) => ({
+    background: gradientFor(theme, color, palette),
+    color: "#fff",
+    "&:hover": {
+      filter: "brightness(1.1)",
+      transform: "translateY(-2px)",
+      boxShadow: theme.shadows[12]
+    }
+  })
+};
+var buttonVariantStyles = (theme, variant, palette, color) => VARIANT_STYLES[variant ?? ""]?.(theme, palette, color) ?? {};
+var glowStyles = (palette) => ({
+  boxShadow: `0 0 20px 5px ${alpha(palette.main, 0.6)}, 0 0 40px 10px ${alpha(palette.main, 0.3)} !important`,
+  filter: "brightness(1.05)",
+  "&:hover": {
+    boxShadow: `0 0 25px 8px ${alpha(palette.main, 0.7)}, 0 0 50px 15px ${alpha(palette.main, 0.4)} !important`,
+    filter: "brightness(1.1)",
+    transform: "translateY(-2px) scale(1.02)"
+  }
+});
+var pulseStyles = (palette) => ({
+  position: "relative",
+  overflow: "visible",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    height: "100%",
+    borderRadius: "inherit",
+    transform: "translate(-50%, -50%)",
+    backgroundColor: palette.main,
+    opacity: 0.3,
+    animation: `${pulseAnimation} 2s infinite`,
+    pointerEvents: "none",
+    zIndex: -1
+  }
+});
+var buttonEmphasisStyles = (palette, glow, pulse) => ({
+  ...glow ? glowStyles(palette) : {},
+  ...pulse ? pulseStyles(palette) : {}
+});
+
+// src/components/form/Button/Button.tsx
+import { jsx } from "react/jsx-runtime";
+var StyledButton = styled(MuiButton, {
+  shouldForwardProp: (prop) => ["glow", "pulse", "loading", "customVariant", "customColor", "ripple"].indexOf(
+    prop
+  ) === -1
+})(({ theme, customVariant, customColor = "primary", glow, pulse }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    textTransform: "none",
+    fontWeight: 500,
+    borderRadius: theme.spacing(1),
+    transition: "all 0.3s ease",
+    position: "relative",
+    overflow: "hidden",
+    ...iconAlignmentStyles(theme),
+    ...buttonVariantStyles(theme, customVariant, colorPalette, customColor),
+    ...buttonEmphasisStyles(colorPalette, glow, pulse)
+  };
+});
+var muiVariantFor = (variant) => {
+  if (variant === "outline") return "outlined";
+  return variant === "text" ? "text" : "contained";
+};
+var muiColorFor = (color) => {
+  if (color === "danger") return "error";
+  return color === "neutral" ? "inherit" : color;
+};
+function isIconOnly({
+  loading,
+  icon,
+  children
+}) {
+  return !loading && icon != null && children == null;
+}
+var Button = React.forwardRef(
+  (rawProps, ref) => {
+    const {
+      variant,
+      color,
+      size,
+      loading,
+      icon,
+      iconPosition,
+      glow,
+      pulse,
+      ripple,
+      active,
+      children,
+      disabled,
+      onClick,
+      onFocus,
+      onBlur,
+      dataTestId,
+      ...props
+    } = resolveButtonProps(rawProps);
+    const testId = (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `button-${suffix}`;
+    const iconWithTestId = !loading && icon ? /* @__PURE__ */ jsx("span", { "data-testid": testId("icon"), children: icon }) : void 0;
+    const iconOnly = isIconOnly({ loading, icon, children });
+    const mergedClassName = [active ? "active" : "", props.className].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsx(
+      StyledButton,
+      {
+        ref,
+        variant: muiVariantFor(variant),
+        color: muiColorFor(color),
+        customVariant: variant,
+        customColor: color,
+        glow,
+        pulse,
+        ripple,
+        disabled: disabled || loading,
+        disableRipple: !ripple,
+        startIcon: iconPosition === "left" ? iconWithTestId : void 0,
+        endIcon: iconPosition === "right" ? iconWithTestId : void 0,
+        onClick,
+        onFocus,
+        onBlur,
+        sx: buttonSize(size, iconOnly),
+        "data-testid": dataTestId || "button",
+        ...props,
+        className: mergedClassName,
+        children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 16, color: "inherit", "data-testid": testId("loading") }) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export {
+  Button
+};
+//# sourceMappingURL=chunk-ANNZ3PLI.js.map