@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-PLOLSGQY.js

@@ -0,0 +1,271 @@
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-EUGF43BX.js";
+import {
+  DragHandle,
+  useDragItem
+} from "./chunk-K4EKTMTC.js";
+import {
+  CARD_ASPECT_RATIOS
+} from "./chunk-LHHAYZ55.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Checkbox
+} from "./chunk-VEKTKCSB.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Card
+} from "./chunk-J2QIICWP.js";
+import {
+  Text
+} from "./chunk-AJBRO76D.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/base-card.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var cardSx = (opts) => {
+  const { aspectRatio, pad, scale, interactive, draggable } = opts;
+  return {
+    position: "relative",
+    zoom: scale,
+    aspectRatio: String(CARD_ASPECT_RATIOS[aspectRatio]),
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    p: pad,
+    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
+    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {}
+  };
+};
+var OVERLAY_BAND_UNITS = 42 / 8;
+function contentGaps(opts) {
+  const { hasMedia, hasBody, overlays, pad } = opts;
+  const gap = pad * 0.5;
+  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_UNITS - pad) : 0;
+  return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };
+}
+function CardOverlays({
+  selected,
+  onToggleSelect,
+  checkboxTestId,
+  menu
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    onToggleSelect && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", top: sxRem(4), left: sxRem(4), zIndex: 2 }, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: selected,
+        onChange: () => onToggleSelect(),
+        onClick: (event) => event.stopPropagation(),
+        size: "small",
+        "data-testid": checkboxTestId,
+        "aria-label": copy.selection.selectRow
+      }
+    ) }),
+    menu && /* @__PURE__ */ jsx(
+      default2,
+      {
+        sx: { position: "absolute", top: sxRem(4), right: sxRem(4), zIndex: 2 },
+        onClick: (event) => event.stopPropagation(),
+        children: menu
+      }
+    )
+  ] });
+}
+function CardMedia({ image, imageFallback }) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 1,
+        "& img": { width: "100%", height: "100%", objectFit: "cover" }
+      },
+      children: image ?? imageFallback
+    }
+  );
+}
+function CardBodyContent({
+  children,
+  fill,
+  topGap
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        flex: fill ? 1 : "none",
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 0.75,
+        mt: topGap,
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+}
+function CardCaption({
+  title,
+  subtitle,
+  topGap
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(default2, { sx: { mt: topGap, minWidth: 0 }, children: [
+    title != null && /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "heading",
+        size: "sm",
+        weight: "bold",
+        as: "p",
+        style: {
+          lineHeight: 1.15,
+          fontSize: rem(theme, 15.2),
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: title
+      }
+    ),
+    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: subtitle })
+  ] });
+}
+function CardContents({
+  children,
+  image,
+  imageFallback,
+  title,
+  subtitle,
+  overlays,
+  pad
+}) {
+  const hasMedia = image != null || imageFallback != null;
+  const hasBody = children != null;
+  const hasCaption = title != null || subtitle != null;
+  const top = contentGaps({ hasMedia, hasBody, overlays, pad });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasMedia && /* @__PURE__ */ jsx(CardMedia, { image, imageFallback }),
+    hasBody && /* @__PURE__ */ jsx(CardBodyContent, { fill: !hasMedia, topGap: top.body, children }),
+    hasCaption && /* @__PURE__ */ jsx(CardCaption, { title, subtitle, topGap: top.caption })
+  ] });
+}
+function useCardShell(props) {
+  const actionable = isActionable(props.state);
+  return {
+    selectable: isSelectable(props),
+    actionable,
+    theme: useTheme(),
+    slot: slotTestIds(props.testId),
+    scale: props.scale ?? 1,
+    // The card's own veto over the container's decision — see `CardSurfaceProps`.
+    drag: useDragItem(props.draggable === false || !actionable ? void 0 : props.dragId)
+  };
+}
+function BaseCard(props) {
+  const { aspectRatio = "4:3", selected = false } = props;
+  const { menu, onToggleSelect, onClick } = props;
+  const { selectable, actionable, theme, slot, scale, drag } = useCardShell(props);
+  const dataTestId = props.testId;
+  const checkboxTestId = slot("checkbox");
+  const pad = 1.5;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outlined",
+      onClick,
+      dataTestId,
+      className: props.className,
+      "aria-label": props["aria-label"],
+      "aria-disabled": actionable ? void 0 : true,
+      ...drag.itemProps,
+      sx: {
+        // The same corner the row uses: a Grade and a Lista of the same records
+        // sit beside each other, and a tile that rounds harder than the row
+        // reads as a different component.
+        borderRadius: CARD_RADIUS,
+        // The shared half — variant, colour, selection, effects — identical to
+        // the one BaseListCard uses, so a Grade and a Lista of the same records
+        // are dressed by one set of rules.
+        ...cardSurfaceStyles(
+          {
+            ...props,
+            selectable,
+            shape: "tile",
+            // A card mid-drag is a ghost of itself; the drop target is what the
+            // eye should be on.
+            state: drag.dragging ? "disabled" : props.state
+          },
+          theme
+        ),
+        // …and the tile's own geometry on top.
+        ...cardSx({
+          aspectRatio,
+          pad,
+          scale,
+          interactive: onClick != null,
+          draggable: drag.draggable && drag.handleProps === void 0
+        })
+      },
+      children: [
+        drag.draggable && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", bottom: sxRem(4), left: sxRem(4), zIndex: 2 }, children: /* @__PURE__ */ jsx(
+          DragHandle,
+          {
+            handleProps: drag.handleProps,
+            gated: drag.handleProps !== void 0,
+            testId: slot("drag")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          CardOverlays,
+          {
+            selected,
+            onToggleSelect: selectable ? onToggleSelect ?? (() => {
+            }) : void 0,
+            checkboxTestId,
+            menu
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CardContents,
+          {
+            image: props.image,
+            imageFallback: props.imageFallback,
+            title: props.title,
+            subtitle: props.subtitle,
+            overlays: selectable || menu != null,
+            pad,
+            children: props.children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  BaseCard
+};
+//# sourceMappingURL=chunk-PLOLSGQY.js.map

package/dist/chunk-PUFA7FQ7.js

@@ -0,0 +1,150 @@
+import {
+  accentFor
+} from "./chunk-B7ZHEOQQ.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Label/Label.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZES = {
+  xs: (theme) => ({ fontSize: rem(theme, 12), lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
+  sm: (theme) => ({ fontSize: rem(theme, 14), lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
+  md: (theme) => ({ fontSize: rem(theme, 16), lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
+  lg: (theme) => ({ fontSize: rem(theme, 18), lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
+  xl: (theme) => ({ fontSize: rem(theme, 20), lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) })
+};
+var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
+var WEIGHTS = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var fontWeight = (weight) => WEIGHTS[weight] ?? WEIGHTS.regular;
+var textColor = (theme, flags) => {
+  if (flags.error) return theme.palette.error.main;
+  if (flags.disabled) return theme.palette.text.disabled;
+  if (flags.color === "neutral") return theme.palette.text.primary;
+  return accentFor(theme, flags.color).main;
+};
+var rippleStyles = (theme) => ({
+  overflow: "hidden",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: 0,
+    height: 0,
+    borderRadius: "50%",
+    backgroundColor: alpha(theme.palette.primary.main, 0.3),
+    transform: "translate(-50%, -50%)",
+    transition: "width 0.6s, height 0.6s"
+  },
+  "&:active::after": { width: "300%", height: "300%" }
+});
+var SURFACES = {
+  filled: ({ theme, flags, accent }) => ({
+    backgroundColor: alpha(accent, 0.1),
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {}
+  }),
+  outlined: ({ theme, flags, accent }) => ({
+    border: `1px solid ${alpha(accent, 0.5)}`,
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) } : {}
+  }),
+  glass: ({ theme, flags }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? {
+      backgroundColor: alpha(theme.palette.background.paper, 0.15),
+      borderColor: alpha(theme.palette.primary.main, 0.3)
+    } : {}
+  }),
+  gradient: ({ theme, flags }) => {
+    const accent = accentFor(theme, flags.color === "neutral" ? "primary" : flags.color);
+    const clip = {
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      backgroundClip: "text"
+    };
+    return {
+      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,
+      ...clip,
+      "&:hover": flags.clickable ? {
+        background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,
+        ...clip
+      } : {}
+    };
+  },
+  minimal: ({ theme, flags }) => ({
+    padding: 0,
+    "&:hover": flags.clickable ? { color: theme.palette.primary.main } : {}
+  }),
+  default: () => ({})
+};
+var textLayout = (theme, flags) => {
+  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;
+  return {
+    display: srOnly ? "none" : "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    cursor: clickable ? "pointer" : "default",
+    textAlign: align,
+    fontWeight: fontWeight(weight),
+    textTransform: transform,
+    whiteSpace: nowrap ? "nowrap" : "normal",
+    overflow: truncate ? "hidden" : "visible",
+    textOverflow: truncate ? "ellipsis" : "clip",
+    position: "relative"
+  };
+};
+var labelStyles = (theme, flags) => {
+  const { variant, size, clickable } = flags;
+  const color = textColor(theme, flags);
+  const accent = color || theme.palette.primary.main;
+  return {
+    ...textLayout(theme, flags),
+    ...sizeStyles(theme, size),
+    color,
+    ...flags.glow && { textShadow: `0 0 ${rem(theme, 10)} ${alpha(accent, 0.5)}` },
+    ...flags.pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { opacity: 1 },
+        "50%": { opacity: 0.6 },
+        "100%": { opacity: 1 }
+      }
+    },
+    ...flags.ripple && clickable && rippleStyles(theme),
+    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent })
+  };
+};
+var SR_ONLY_SX = {
+  position: "absolute",
+  width: sxRem(1),
+  height: sxRem(1),
+  padding: 0,
+  margin: sxRem(-1),
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+export {
+  sizeStyles,
+  textColor,
+  labelStyles,
+  SR_ONLY_SX
+};
+//# sourceMappingURL=chunk-PUFA7FQ7.js.map

package/dist/chunk-PUNSVPME.js

@@ -0,0 +1,153 @@
+import {
+  absoluteInk,
+  controlNeutral,
+  neutralTones
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/typography/Blockquote/Blockquote.tsx
+import FormatQuote from "@mui/icons-material/FormatQuote";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    const { main, light, dark } = controlNeutral(theme);
+    return { main, light, dark };
+  }
+  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
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var StyledBlockquote = styled("blockquote", {
+  shouldForwardProp: (prop) => !["customVariant", "customColor"].includes(prop)
+})(({ theme, customVariant = "default", customColor = "neutral" }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const baseStyles = {
+    margin: "1.5em 0",
+    padding: 0,
+    position: "relative",
+    fontFamily: theme.typography.body1.fontFamily,
+    fontSize: rem(theme, 18),
+    lineHeight: 1.6,
+    fontStyle: "italic",
+    color: theme.palette.text.primary
+  };
+  if (customVariant === "bordered") {
+    return {
+      ...baseStyles,
+      padding: theme.spacing(3),
+      border: `${rem(theme, 2)} solid ${alpha(colorPalette.main, 0.2)}`,
+      borderRadius: theme.shape.borderRadius * 2,
+      backgroundColor: alpha(colorPalette.main, 0.03),
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: rem(theme, -1),
+        left: rem(theme, -1),
+        right: rem(theme, -1),
+        bottom: rem(theme, -1),
+        background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
+        borderRadius: theme.shape.borderRadius * 2,
+        padding: rem(theme, 2),
+        WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
+        WebkitMaskComposite: "exclude",
+        mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
+        maskComposite: "exclude"
+      }
+    };
+  }
+  if (customVariant === "citation") {
+    return {
+      ...baseStyles,
+      padding: theme.spacing(2, 3),
+      backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.paper, 0.8) : alpha(neutralTones(theme).canvas, 0.95),
+      backdropFilter: theme.palette.mode === "dark" ? `blur(${rem(theme, 10)})` : "none",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      borderRadius: theme.shape.borderRadius * 2,
+      boxShadow: theme.palette.mode === "dark" ? theme.shadows[4] : "none",
+      textAlign: "center"
+    };
+  }
+  return {
+    ...baseStyles,
+    paddingLeft: theme.spacing(3),
+    borderLeft: `${rem(theme, 4)} solid ${colorPalette.main}`,
+    backgroundColor: alpha(colorPalette.main, 0.05),
+    padding: theme.spacing(2, 3),
+    borderRadius: theme.shape.borderRadius
+  };
+});
+var QuoteIcon = styled(FormatQuote)(({ theme, customColor }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    position: "absolute",
+    top: theme.spacing(1),
+    left: theme.spacing(1),
+    fontSize: rem(theme, 32),
+    opacity: 0.3,
+    transform: "rotate(180deg)",
+    color: colorPalette.main
+  };
+});
+var CitationContainer = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  textAlign: "right",
+  fontStyle: "normal",
+  opacity: 0.8
+}));
+var AuthorName = styled(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  fontSize: rem(theme, 14),
+  marginBottom: theme.spacing(0.5)
+}));
+var SourceName = styled(Typography)(({ theme }) => ({
+  fontSize: rem(theme, 12),
+  opacity: 0.7
+}));
+var Blockquote = React.forwardRef(
+  ({ variant = "default", author, source, color = "neutral", children, ...props }, ref) => {
+    const showCitation = author || source;
+    const showIcon = variant === "bordered" || variant === "citation";
+    return /* @__PURE__ */ jsxs(StyledBlockquote, { ref, customVariant: variant, customColor: color, ...props, children: [
+      showIcon && /* @__PURE__ */ jsx(QuoteIcon, { customColor: color }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "div",
+          sx: {
+            fontSize: "inherit",
+            lineHeight: "inherit",
+            fontStyle: "inherit",
+            color: "inherit",
+            margin: 0
+          },
+          children
+        }
+      ),
+      showCitation && /* @__PURE__ */ jsxs(CitationContainer, { children: [
+        author && /* @__PURE__ */ jsxs(AuthorName, { children: [
+          "\u2014 ",
+          author
+        ] }),
+        source && /* @__PURE__ */ jsx(SourceName, { children: source })
+      ] })
+    ] });
+  }
+);
+Blockquote.displayName = "Blockquote";
+
+export {
+  Blockquote
+};
+//# sourceMappingURL=chunk-PUNSVPME.js.map

package/dist/chunk-Q3HYEAVQ.js

@@ -0,0 +1,16 @@
+import {
+  uiThemeFromMui
+} from "./chunk-IBOFASAZ.js";
+
+// src/provider/use-ui-theme.ts
+import { useTheme } from "@mui/material/styles/index.js";
+import * as React from "react";
+function useUiTheme() {
+  const theme = useTheme();
+  return React.useMemo(() => uiThemeFromMui(theme), [theme]);
+}
+
+export {
+  useUiTheme
+};
+//# sourceMappingURL=chunk-Q3HYEAVQ.js.map

package/dist/chunk-QCTG7LIX.js

@@ -0,0 +1,62 @@
+import {
+  CarouselArrows,
+  CarouselIndicators,
+  CarouselThumbnails
+} from "./chunk-7GWRSYUS.js";
+
+// src/components/data-display/Carousel/Carousel.chrome.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CarouselChrome = ({
+  copy,
+  items,
+  activeIndex,
+  loop,
+  disabled,
+  showArrows,
+  showIndicators,
+  showThumbnails,
+  arrowPosition,
+  indicatorPosition,
+  color,
+  size,
+  onPrev,
+  onNext,
+  onSelect
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  showArrows && !disabled && /* @__PURE__ */ jsx(
+    CarouselArrows,
+    {
+      copy,
+      onPrev,
+      onNext,
+      position: arrowPosition,
+      color,
+      disablePrev: !loop && activeIndex === 0,
+      disableNext: !loop && activeIndex === items.length - 1
+    }
+  ),
+  showIndicators && /* @__PURE__ */ jsx(
+    CarouselIndicators,
+    {
+      count: items.length,
+      activeIndex,
+      onSelect,
+      position: indicatorPosition,
+      color
+    }
+  ),
+  showThumbnails && /* @__PURE__ */ jsx(
+    CarouselThumbnails,
+    {
+      items,
+      activeIndex,
+      onSelect,
+      size
+    }
+  )
+] });
+
+export {
+  CarouselChrome
+};
+//# sourceMappingURL=chunk-QCTG7LIX.js.map