@12-apps/ui 6.54.1 → 6.55.0

package/dist/chunk-JDVHNDY3.js

@@ -1,173 +0,0 @@
-import {
-  useSettingCard
-} from "./chunk-SALQ65SM.js";
-import {
-  useSummaryInfo
-} from "./chunk-PKSU3RBT.js";
-import {
-  LearnMore,
-  PendingSpinner,
-  SaveError,
-  SettingHeader,
-  partTestId
-} from "./chunk-2JTZWQ25.js";
-import {
-  SETTING_CARD_OPEN_ATTR,
-  actionsStyles,
-  summaryStyles,
-  surfaceStyles,
-  withCallerSx
-} from "./chunk-WE2LNTR6.js";
-import {
-  Icon
-} from "./chunk-VEHMODO3.js";
-import {
-  Button
-} from "./chunk-RIZRF5XR.js";
-
-// src/components/layout/SettingCard/SettingCard.tsx
-import Box from "@mui/material/Box/index.js";
-import { forwardRef, useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var OpenBody = ({
-  bodyRef,
-  titleId,
-  errorId,
-  copy,
-  learnMore,
-  children,
-  saving,
-  error,
-  saveDisabled,
-  onSave,
-  onCancel,
-  dataTestId
-}) => {
-  const onKeyDown = (event) => {
-    if (event.key !== "Escape") return;
-    event.stopPropagation();
-    onCancel();
-  };
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ref: bodyRef,
-      role: "group",
-      "aria-labelledby": titleId,
-      onKeyDown,
-      sx: { display: "flex", flexDirection: "column", gap: 2, flex: 1 },
-      "data-testid": partTestId(dataTestId, "body"),
-      children: [
-        /* @__PURE__ */ jsx(Box, { children }),
-        learnMore && /* @__PURE__ */ jsx(LearnMore, { label: copy.learnMore, dataTestId, children: learnMore }),
-        /* @__PURE__ */ jsx(SaveError, { id: errorId, message: error, dataTestId }),
-        /* @__PURE__ */ jsxs(Box, { sx: (theme) => actionsStyles(theme), children: [
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "neutral", onClick: onCancel, disabled: saving, dataTestId: partTestId(dataTestId, "cancel"), children: copy.cancel }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "solid",
-              onClick: onSave,
-              disabled: saveDisabled,
-              "aria-disabled": saving || void 0,
-              "aria-describedby": error ? errorId : void 0,
-              icon: saving ? /* @__PURE__ */ jsx(PendingSpinner, { dataTestId }) : void 0,
-              iconPosition: "left",
-              dataTestId: partTestId(dataTestId, "save"),
-              children: saving ? copy.saving : copy.save
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var EditTrigger = ({ triggerRef, id, titleId, label, disabled, onOpen, dataTestId }) => /* @__PURE__ */ jsx(
-  Button,
-  {
-    ref: triggerRef,
-    id,
-    variant: "outline",
-    color: "neutral",
-    size: "sm",
-    icon: /* @__PURE__ */ jsx(Icon, { name: "Edit", size: "xs" }),
-    iconPosition: "left",
-    disabled,
-    "aria-labelledby": `${id} ${titleId}`,
-    onClick: onOpen,
-    dataTestId: partTestId(dataTestId, "edit"),
-    children: label
-  }
-);
-var SettingCard = forwardRef(function SettingCard2(props, ref) {
-  const { title, headingLevel = "h3", icon, status, summary, children, learnMore, copy, dataTestId, className, sx } = props;
-  const baseId = useId();
-  const titleId = `${baseId}-title`;
-  const card = useSettingCard(props);
-  const { open } = card;
-  const clamp = useSummaryInfo({ summary, show: !open, label: copy.moreInfo ?? title, dataTestId });
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      component: "section",
-      ref,
-      "aria-labelledby": titleId,
-      "aria-busy": card.saving || void 0,
-      "data-state": open ? "open" : "closed",
-      ...{ [SETTING_CARD_OPEN_ATTR]: open ? "" : void 0 },
-      "data-testid": dataTestId,
-      className,
-      sx: withCallerSx((theme) => surfaceStyles(theme, open), sx),
-      children: [
-        /* @__PURE__ */ jsx(
-          SettingHeader,
-          {
-            titleId,
-            title,
-            headingLevel,
-            icon,
-            status,
-            info: clamp.info,
-            trailing: open ? null : /* @__PURE__ */ jsx(
-              EditTrigger,
-              {
-                triggerRef: card.editRef,
-                id: `${baseId}-edit`,
-                titleId,
-                label: copy.edit,
-                disabled: card.disabled,
-                onOpen: card.openCard,
-                dataTestId
-              }
-            ),
-            dataTestId
-          }
-        ),
-        !open && summary != null && /* @__PURE__ */ jsx(Box, { component: "p", ref: clamp.ref, sx: summaryStyles, "data-testid": partTestId(dataTestId, "summary"), children: summary }),
-        open && /* @__PURE__ */ jsx(
-          OpenBody,
-          {
-            bodyRef: card.bodyRef,
-            titleId,
-            errorId: `${baseId}-error`,
-            copy,
-            learnMore,
-            saving: card.saving,
-            error: card.error,
-            saveDisabled: card.saveDisabled,
-            onSave: card.save,
-            onCancel: card.cancel,
-            dataTestId,
-            children
-          }
-        )
-      ]
-    }
-  );
-});
-SettingCard.displayName = "SettingCard";
-
-export {
-  SettingCard
-};
-//# sourceMappingURL=chunk-JDVHNDY3.js.map

package/dist/chunk-JE6RZ5L6.js

@@ -1,157 +0,0 @@
-import {
-  usePwaInstall
-} from "./chunk-5GMHJ7Y5.js";
-import {
-  installPromptStyles
-} from "./chunk-GY62N32G.js";
-
-// src/components/utility/InstallPrompt/InstallPrompt.tsx
-import Close from "@mui/icons-material/Close";
-import InstallMobile from "@mui/icons-material/InstallMobile";
-import IosShare from "@mui/icons-material/IosShare";
-import Box from "@mui/material/Box/index.js";
-import Button from "@mui/material/Button/index.js";
-import IconButton from "@mui/material/IconButton/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { styled } from "@mui/material/styles/index.js";
-import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var StyledInstallPrompt = styled(Box)(({ theme }) => installPromptStyles(theme));
-var testIdFor = (base, suffix) => base ? `${base}-${suffix}` : `install-prompt-${suffix}`;
-var IosInstructions = ({ copy, instructions, dataTestId }) => /* @__PURE__ */ jsx(
-  Typography,
-  {
-    className: "install-prompt-description",
-    variant: "body2",
-    component: "div",
-    "data-testid": testIdFor(dataTestId, "ios-instructions"),
-    sx: { display: "flex", alignItems: "center", gap: 0.5, flexWrap: "wrap" },
-    children: instructions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-      copy.iosTapBefore,
-      " ",
-      /* @__PURE__ */ jsx(IosShare, { fontSize: "small", "aria-label": copy.shareLabel }),
-      " ",
-      copy.iosTapAfter
-    ] })
-  }
-);
-var InstallPromptBody = ({ copy, icon, title, description, iosInstructions, platform, dataTestId }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Box, { className: "install-prompt-icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(InstallMobile, {}) }),
-  /* @__PURE__ */ jsxs(Box, { className: "install-prompt-content", children: [
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        className: "install-prompt-title",
-        variant: "subtitle2",
-        component: "div",
-        "data-testid": testIdFor(dataTestId, "title"),
-        children: title
-      }
-    ),
-    description && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        className: "install-prompt-description",
-        variant: "body2",
-        component: "div",
-        "data-testid": testIdFor(dataTestId, "description"),
-        children: description
-      }
-    ),
-    platform === "ios" && /* @__PURE__ */ jsx(IosInstructions, { copy, instructions: iosInstructions, dataTestId })
-  ] })
-] });
-var InstallPromptActions = ({ platform, installLabel, dismissLabel, onInstallClick, onDismissClick, dataTestId }) => /* @__PURE__ */ jsxs(Box, { className: "install-prompt-actions", children: [
-  platform === "prompt" && /* @__PURE__ */ jsx(
-    Button,
-    {
-      size: "small",
-      variant: "contained",
-      onClick: onInstallClick,
-      "data-testid": testIdFor(dataTestId, "install"),
-      children: installLabel
-    }
-  ),
-  /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      size: "small",
-      onClick: onDismissClick,
-      "aria-label": dismissLabel,
-      "data-testid": testIdFor(dataTestId, "dismiss"),
-      children: /* @__PURE__ */ jsx(Close, { fontSize: "small" })
-    }
-  )
-] });
-var InstallPrompt = React.forwardRef(
-  ({
-    copy,
-    description,
-    iosInstructions,
-    icon,
-    onInstall,
-    onDismiss,
-    storageKey,
-    dismissForDays,
-    className,
-    "data-testid": dataTestId = "install-prompt",
-    ...props
-  }, ref) => {
-    const { canInstall, platform, promptInstall, dismiss } = usePwaInstall({
-      storageKey,
-      dismissForDays
-    });
-    const handleInstall = React.useCallback(() => {
-      void promptInstall().then((outcome) => onInstall?.(outcome));
-    }, [promptInstall, onInstall]);
-    const handleDismiss = React.useCallback(() => {
-      dismiss();
-      onDismiss?.();
-    }, [dismiss, onDismiss]);
-    if (!canInstall) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs(
-      StyledInstallPrompt,
-      {
-        ref,
-        className,
-        role: "region",
-        "aria-label": copy.title,
-        "data-testid": dataTestId,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            InstallPromptBody,
-            {
-              icon,
-              copy,
-              title: copy.title,
-              description,
-              iosInstructions,
-              platform,
-              dataTestId
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            InstallPromptActions,
-            {
-              platform,
-              installLabel: copy.installLabel,
-              dismissLabel: copy.dismissLabel,
-              onInstallClick: handleInstall,
-              onDismissClick: handleDismiss,
-              dataTestId
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-InstallPrompt.displayName = "InstallPrompt";
-
-export {
-  InstallPrompt
-};
-//# sourceMappingURL=chunk-JE6RZ5L6.js.map

package/dist/chunk-JH7EEJEQ.js

@@ -1,99 +0,0 @@
-import {
-  alpha
-} from "./chunk-6JAIFIPW.js";
-import {
-  ABSOLUTE_INK
-} from "./chunk-N3GAFIXG.js";
-
-// src/components/layout/Card/Card.metrics.ts
-var CARD_RADIUS_UNITS = {
-  none: 0,
-  sm: 0.5,
-  md: 1,
-  lg: 2,
-  xl: 3
-};
-var CARD_RADIUS_FULL = "50%";
-var CARD_BORDER_WIDTH = 1;
-var CARD_PAPER_SHADOW = [
-  { offsetX: 0, offsetY: 2, blurRadius: 1, spreadDistance: -1, color: alpha(ABSOLUTE_INK.black, 0.2) },
-  { offsetX: 0, offsetY: 1, blurRadius: 1, spreadDistance: 0, color: alpha(ABSOLUTE_INK.black, 0.14) },
-  { offsetX: 0, offsetY: 1, blurRadius: 3, spreadDistance: 0, color: alpha(ABSOLUTE_INK.black, 0.12) }
-];
-var CARD_ELEVATION = { rest: 4, lifted: 8 };
-var CARD_GLASS = {
-  backgroundAlpha: { rest: 0.1, lifted: 0.15 },
-  borderAlpha: { rest: 0.2, lifted: 0.3 },
-  blurPx: 20,
-  shadow: { offsetY: 8, blurRadius: 32, alpha: 0.1 }
-};
-var CARD_GRADIENT = {
-  angleDeg: 135,
-  shadow: { offsetY: 4, blurRadius: 20, alpha: 0.3 }
-};
-var CARD_NEUMORPHIC = {
-  spread: { rest: 8, lifted: 12 },
-  blurFactor: 2,
-  alpha: {
-    dark: { near: 0.3, far: 0.1 },
-    light: { near: { rest: 0.2, lifted: 0.3 }, far: { rest: 0.8, lifted: 0.9 } }
-  }
-};
-function neumorphicShadows(lifted, near, far) {
-  const spread = lifted ? CARD_NEUMORPHIC.spread.lifted : CARD_NEUMORPHIC.spread.rest;
-  const blurRadius = spread * CARD_NEUMORPHIC.blurFactor;
-  return [
-    { offsetX: spread, offsetY: spread, blurRadius, spreadDistance: 0, color: near },
-    { offsetX: -spread, offsetY: -spread, blurRadius, spreadDistance: 0, color: far }
-  ];
-}
-var CARD_SECTION_BACKGROUND = {
-  dark: { rest: alpha(ABSOLUTE_INK.black, 0.2), lifted: alpha(ABSOLUTE_INK.black, 0.25) },
-  light: { rest: alpha(ABSOLUTE_INK.black, 0.02), lifted: alpha(ABSOLUTE_INK.black, 0.04) }
-};
-var CARD_GLOW = {
-  rest: { blurRadius: 20, alpha: 0.3 },
-  lifted: { blurRadius: 30, alpha: 0.4 }
-};
-var CARD_PULSE = {
-  alpha: 0.3,
-  durationMs: 2e3,
-  spread: 15,
-  /** The fraction of the cycle the ring is still visible for. */
-  fadeAt: 0.7,
-  zIndex: -1
-};
-var CARD_INTERACTIVE_LIFT = 2;
-var CARD_LOADING = { opacity: 0.6, spinnerZIndex: 10, spinnerSize: 40 };
-var CARD_CONTENT_PADDING_UNITS = { normal: 2, dense: 1 };
-var CARD_HEADER = {
-  padding: 16,
-  avatarGap: 16,
-  action: { marginTop: -4, marginRight: -8, marginBottom: -4 }
-};
-var CARD_HEADER_CHILDREN_PADDING_UNITS = 2;
-var CARD_ACTIONS = { padding: 8, gap: 8 };
-var CARD_MEDIA_HEIGHT = 200;
-
-export {
-  CARD_RADIUS_UNITS,
-  CARD_RADIUS_FULL,
-  CARD_BORDER_WIDTH,
-  CARD_PAPER_SHADOW,
-  CARD_ELEVATION,
-  CARD_GLASS,
-  CARD_GRADIENT,
-  CARD_NEUMORPHIC,
-  neumorphicShadows,
-  CARD_SECTION_BACKGROUND,
-  CARD_GLOW,
-  CARD_PULSE,
-  CARD_INTERACTIVE_LIFT,
-  CARD_LOADING,
-  CARD_CONTENT_PADDING_UNITS,
-  CARD_HEADER,
-  CARD_HEADER_CHILDREN_PADDING_UNITS,
-  CARD_ACTIONS,
-  CARD_MEDIA_HEIGHT
-};
-//# sourceMappingURL=chunk-JH7EEJEQ.js.map

package/dist/chunk-JK7SVLE2.js

@@ -1,183 +0,0 @@
-import {
-  buildBadgeContent
-} from "./chunk-WCVVM66J.js";
-import {
-  badgeStyles,
-  getAnchorOrigin
-} from "./chunk-KG64HV34.js";
-import {
-  badgeContentOf,
-  definedAria,
-  formatCount,
-  resolveBadgeProps
-} from "./chunk-6C5D6O3D.js";
-import {
-  CLOSE_DELAY_MS,
-  MOUNT_ANIMATION_MS
-} from "./chunk-PYC4CWCQ.js";
-import {
-  resolveTestId
-} from "./chunk-TYJR4GOF.js";
-
-// src/components/data-display/Badge/Badge.tsx
-import MuiBadge from "@mui/material/Badge/index.js";
-import Zoom from "@mui/material/Zoom/index.js";
-import { styled } from "@mui/material/styles/index.js";
-import React, { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var StyledBadge = styled(MuiBadge, {
-  shouldForwardProp: (prop) => ![
-    "customVariant",
-    "customSize",
-    "customColor",
-    "glow",
-    "pulse",
-    "animate",
-    "shimmer",
-    "bounce",
-    "hasIcon"
-  ].includes(prop)
-})(({
-  theme,
-  customVariant,
-  customSize = "md",
-  customColor = "primary",
-  glow,
-  pulse,
-  animate,
-  shimmer,
-  bounce,
-  hasIcon
-}) => {
-  return badgeStyles({
-    theme,
-    customVariant,
-    customSize,
-    customColor,
-    glow,
-    pulse,
-    animate,
-    shimmer,
-    bounce,
-    hasIcon
-  });
-});
-var useMountAnimation = (enabled) => {
-  const [isAnimating, setIsAnimating] = useState(false);
-  useEffect(() => {
-    if (!enabled) return;
-    setIsAnimating(true);
-    const timer = window.setTimeout(() => setIsAnimating(false), MOUNT_ANIMATION_MS);
-    return () => window.clearTimeout(timer);
-  }, [enabled]);
-  return isAnimating;
-};
-var BadgeSurface = ({ innerRef, isVisible, isAnimating, shouldBeInvisible, finalBadgeContent, aria, rest, ...p }) => {
-  const testId = p["data-testid"];
-  return /* @__PURE__ */ jsx(Zoom, { in: isVisible, timeout: CLOSE_DELAY_MS, children: /* @__PURE__ */ jsx(
-    StyledBadge,
-    {
-      ref: innerRef,
-      className: p.className,
-      customVariant: p.variant,
-      customSize: p.size,
-      customColor: p.color,
-      glow: p.glow,
-      pulse: p.pulse,
-      animate: p.animate,
-      shimmer: p.shimmer,
-      bounce: p.bounce && isAnimating,
-      hasIcon: Boolean(p.icon),
-      badgeContent: finalBadgeContent,
-      variant: p.variant === "dot" ? "dot" : "standard",
-      anchorOrigin: getAnchorOrigin(p.position),
-      invisible: shouldBeInvisible,
-      "data-testid": testId || "badge",
-      slotProps: {
-        badge: {
-          ...aria,
-          // @ts-expect-error - MUI Badge slotProps doesn't include data-testid in types, but it works at runtime
-          "data-testid": testId ? `${testId}-content-wrapper` : "badge-content-wrapper"
-        }
-      },
-      ...rest,
-      children: p.children
-    }
-  ) });
-};
-var Badge = React.forwardRef((componentProps, ref) => {
-  const resolved = resolveBadgeProps(componentProps);
-  const {
-    variant,
-    size,
-    color: _color,
-    glow: _glow,
-    pulse: _pulse,
-    animate,
-    shimmer: _shimmer,
-    bounce,
-    max,
-    showZero,
-    position: _position,
-    children: _children,
-    invisible,
-    closable,
-    onClose,
-    icon,
-    "aria-label": ariaLabel,
-    "aria-live": ariaLive = "polite",
-    "aria-atomic": ariaAtomic = true,
-    "data-testid": _domTestId,
-    // The house and React Native spellings of the same id; they name the
-    // component on both sides and must not reach the DOM as attributes.
-    testID: _testID,
-    dataTestId: _dataTestId,
-    className: _className,
-    content: _content,
-    badgeContent: _badgeContent,
-    ...props
-  } = resolved;
-  const [isVisible, setIsVisible] = useState(true);
-  const isAnimating = useMountAnimation(animate || bounce);
-  const handleClose = (event) => {
-    event.stopPropagation();
-    setIsVisible(false);
-    window.setTimeout(() => onClose?.(), CLOSE_DELAY_MS);
-  };
-  const badgeId = resolveTestId(resolved);
-  const rawContent = badgeContentOf(resolved);
-  const finalBadgeContent = buildBadgeContent({
-    variant,
-    size,
-    icon,
-    closable,
-    dataTestId: badgeId,
-    baseContent: variant === "count" ? formatCount(rawContent, { max, showZero }) : rawContent,
-    onClose: handleClose
-  });
-  const shouldBeInvisible = invisible || variant === "count" && finalBadgeContent === null && !showZero || !isVisible;
-  return /* @__PURE__ */ jsx(
-    BadgeSurface,
-    {
-      ...resolved,
-      "data-testid": badgeId,
-      innerRef: ref,
-      isVisible,
-      isAnimating,
-      shouldBeInvisible,
-      finalBadgeContent,
-      aria: definedAria({
-        "aria-label": ariaLabel,
-        "aria-live": ariaLive,
-        "aria-atomic": ariaAtomic
-      }),
-      rest: props
-    }
-  );
-});
-Badge.displayName = "Badge";
-
-export {
-  Badge
-};
-//# sourceMappingURL=chunk-JK7SVLE2.js.map