@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-N6EEY7V3.js

@@ -1,229 +0,0 @@
-import {
-  RAIL_GAP_PX
-} from "./chunk-BE5Z36XZ.js";
-import {
-  DescriptionItem
-} from "./chunk-G6ZPQHBL.js";
-import {
-  default as default2
-} from "./chunk-6DPAWXZ3.js";
-import {
-  Text
-} from "./chunk-MKLIMY3D.js";
-import {
-  rem,
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/DataViews/base-list-card-slots.tsx
-import { Fragment } from "react";
-import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
-var META_BREAK = 520;
-var STACK_BREAK = 360;
-var TABULAR = { fontVariantNumeric: "tabular-nums" };
-var CLAMP = {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-function ListCardCaption({
-  title,
-  subtitle,
-  href,
-  target,
-  testId
-}) {
-  return /* @__PURE__ */ jsxs(default2, { "data-slot": "caption", sx: { minWidth: 0 }, children: [
-    title != null && /* @__PURE__ */ jsx(Text, { variant: "heading", size: "sm", weight: "bold", as: "p", children: /* @__PURE__ */ jsx(
-      default2,
-      {
-        ...href ? { component: "a", href, target } : { component: "span" },
-        "data-testid": testId,
-        sx: {
-          display: "block",
-          lineHeight: 1.2,
-          fontSize: sxRem(14.4),
-          color: "inherit",
-          textDecoration: "none",
-          ...CLAMP,
-          ...href ? {
-            "&::after": {
-              content: '""',
-              position: "absolute",
-              inset: 0,
-              // Under the checkbox, drag grip, actions and menu, which
-              // all raise themselves to 1.
-              zIndex: 0
-            },
-            "&:hover": { textDecoration: "underline" }
-          } : {}
-        },
-        children: title
-      }
-    ) }),
-    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", ...CLAMP }, children: subtitle }) })
-  ] });
-}
-function MetaRule() {
-  return /* @__PURE__ */ jsx(
-    default2,
-    {
-      "aria-hidden": true,
-      sx: {
-        flex: "0 0 auto",
-        color: "text.disabled",
-        opacity: 0.5,
-        userSelect: "none",
-        fontSize: sxRem(14),
-        // A cancelled row strikes the whole meta cluster, and a struck `|` is a
-        // dagger. The rule is punctuation, not data — nothing to void.
-        textDecoration: "none"
-      },
-      children: "|"
-    }
-  );
-}
-function ListCardMeta({
-  meta,
-  metaSlot,
-  trailingRule
-}) {
-  const items = meta ?? [];
-  return /* @__PURE__ */ jsxs(
-    default2,
-    {
-      "data-slot": "meta",
-      sx: (theme) => ({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-evenly",
-        // A FLOOR, not the spacing itself: `space-evenly` supplies the rest, and
-        // this is only what keeps a rail with no room to spare from running the
-        // date straight into the rule.
-        gap: 1,
-        whiteSpace: "nowrap",
-        ...TABULAR,
-        // Rung 1 of the ladder.
-        [`@container (max-width: ${rem(theme, META_BREAK)})`]: { display: "none" }
-      }),
-      children: [
-        items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          index > 0 && /* @__PURE__ */ jsx(MetaRule, {}),
-          /* @__PURE__ */ jsx(
-            default2,
-            {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                minWidth: 0,
-                // Sized to the pair, so the gaps either side of it are free space
-                // that `space-evenly` can equalise.
-                flex: "0 0 auto"
-              },
-              children: /* @__PURE__ */ jsx(DescriptionItem, { orientation: "vertical", align: "center", ...item })
-            }
-          )
-        ] }, `${item.label}-${index}`)),
-        metaSlot,
-        trailingRule && items.length > 0 && /* @__PURE__ */ jsx(MetaRule, {})
-      ]
-    }
-  );
-}
-var valueFlush = (theme) => ({
-  marginLeft: rem(theme, -RAIL_GAP_PX),
-  [`@container (max-width: ${rem(theme, META_BREAK)})`]: { marginLeft: 0 }
-});
-function ListCardValue({ value }) {
-  return /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "medium", as: "span", children: /* @__PURE__ */ jsx(
-    default2,
-    {
-      component: "span",
-      sx: { fontSize: sxRem(14), whiteSpace: "nowrap", ...TABULAR },
-      children: value
-    }
-  ) });
-}
-function ListCardActions({
-  actions,
-  alwaysVisible,
-  menu,
-  testId
-}) {
-  if (actions == null && menu == null) return null;
-  return (
-    // z-index 1: above the stretched link, so these stay clickable.
-    /* @__PURE__ */ jsxs(
-      default2,
-      {
-        "data-slot": "actions",
-        sx: { display: "flex", alignItems: "center", gap: 0.5, position: "relative", zIndex: 1 },
-        children: [
-          actions && /* @__PURE__ */ jsx(
-            default2,
-            {
-              "data-testid": testId("actions"),
-              onClick: (event) => event.stopPropagation(),
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 0.5,
-                ...alwaysVisible ? {} : {
-                  visibility: "hidden",
-                  ".MuiPaper-root:hover &, .MuiPaper-root:focus-within &": {
-                    visibility: "visible"
-                  }
-                }
-              },
-              children: actions
-            }
-          ),
-          menu && /* @__PURE__ */ jsx(default2, { "data-testid": testId("menu"), onClick: (event) => event.stopPropagation(), children: menu })
-        ]
-      }
-    )
-  );
-}
-function ListCardTail({
-  value,
-  separated,
-  actions,
-  actionsAlwaysVisible,
-  menu,
-  testId
-}) {
-  return /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx(
-      default2,
-      {
-        "data-slot": "value",
-        sx: (theme) => ({
-          textAlign: "right",
-          ...separated && value != null ? valueFlush(theme) : {}
-        }),
-        "data-testid": testId("value"),
-        children: value != null && /* @__PURE__ */ jsx(ListCardValue, { value })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ListCardActions,
-      {
-        actions,
-        alwaysVisible: actionsAlwaysVisible,
-        menu,
-        testId
-      }
-    )
-  ] });
-}
-
-export {
-  META_BREAK,
-  STACK_BREAK,
-  ListCardCaption,
-  ListCardMeta,
-  ListCardActions,
-  ListCardTail
-};
-//# sourceMappingURL=chunk-N6EEY7V3.js.map

package/dist/chunk-NCEQWEXT.js

@@ -1,86 +0,0 @@
-import {
-  transitionFor
-} from "./chunk-N7GE6BGM.js";
-import {
-  backdropSx,
-  panelSx
-} from "./chunk-NDMPXMW2.js";
-import {
-  withDefaults
-} from "./chunk-HPK33ACY.js";
-
-// src/components/feedback/Modal/Modal.tsx
-import Backdrop from "@mui/material/Backdrop/index.js";
-import Box from "@mui/material/Box/index.js";
-import MuiModal from "@mui/material/Modal/index.js";
-import { useTheme } from "@mui/material/styles/index.js";
-import { jsx } from "react/jsx-runtime";
-var DEFAULTS = {
-  variant: "center",
-  size: "md",
-  backdrop: true,
-  persistent: false,
-  glass: false,
-  gradient: false,
-  glow: false,
-  pulse: false,
-  borderRadius: "lg"
-};
-var Modal = (props) => {
-  const {
-    children,
-    variant,
-    size,
-    backdrop,
-    persistent,
-    glass,
-    gradient,
-    glow,
-    pulse,
-    borderRadius,
-    onClose,
-    open,
-    dataTestId,
-    ...rest
-  } = withDefaults(props, DEFAULTS);
-  const theme = useTheme();
-  const isGlass = glass || variant === "glass";
-  const handleClose = (_event, reason) => {
-    if (persistent && (reason === "backdropClick" || reason === "escapeKeyDown")) {
-      return;
-    }
-    onClose?.();
-  };
-  const TransitionComponent = transitionFor(variant);
-  return /* @__PURE__ */ jsx(
-    MuiModal,
-    {
-      open,
-      onClose: handleClose,
-      closeAfterTransition: true,
-      BackdropComponent: backdrop ? Backdrop : void 0,
-      BackdropProps: {
-        timeout: 500,
-        sx: backdropSx(theme, isGlass),
-        // @ts-expect-error - data-testid is not part of BackdropProps type but is valid HTML
-        "data-testid": dataTestId ? `${dataTestId}-backdrop` : "modal-backdrop"
-      },
-      ...rest,
-      children: /* @__PURE__ */ jsx(TransitionComponent, { in: open, timeout: 500, children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          sx: panelSx(theme, { variant, size, borderRadius, glass, gradient, glow, pulse }),
-          "data-testid": dataTestId || "modal",
-          children
-        }
-      ) })
-    }
-  );
-};
-var ModalContent = ({ children, padding, dataTestId }) => /* @__PURE__ */ jsx(Box, { sx: { p: padding ?? 3 }, "data-testid": dataTestId || "modal-content", children });
-
-export {
-  Modal,
-  ModalContent
-};
-//# sourceMappingURL=chunk-NCEQWEXT.js.map

package/dist/chunk-NCHYYSGZ.js

@@ -1,174 +0,0 @@
-import {
-  FormControl,
-  FormLabel,
-  FormMessage
-} from "./chunk-D6KL74KI.js";
-import {
-  fieldControlStyles
-} from "./chunk-2TZ6X265.js";
-import {
-  fieldEdge
-} from "./chunk-7FDU3FIN.js";
-import {
-  fieldRadiusPx
-} from "./chunk-GDN2LUTZ.js";
-import {
-  rem,
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-import {
-  stackedOverlayZIndex
-} from "./chunk-MFU4Y25U.js";
-
-// src/components/form/CreatableSelect/CreatableSelect.tsx
-import { useTheme } from "@mui/material/styles/index.js";
-import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete/index.js";
-import CircularProgress from "@mui/material/CircularProgress/index.js";
-import TextField from "@mui/material/TextField/index.js";
-import { useId, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var CREATE_PREFIX = " create:";
-var filterOptions = createFilterOptions();
-var rowInset = (theme, depth) => rem(theme, 16 * (1 + depth));
-var MUI_SIZE = { xs: "small", sm: "small", md: "medium", lg: "medium", xl: "medium" };
-var fieldSx = {
-  "& .MuiOutlinedInput-root": {
-    borderRadius: fieldRadiusPx,
-    "& fieldset": {
-      borderColor: (theme) => fieldEdge(theme)
-    },
-    "&:hover fieldset": { borderColor: "primary.main" },
-    "&.Mui-focused fieldset": { borderColor: "primary.main", borderWidth: sxRem(2) },
-    "&.Mui-error fieldset": { borderColor: "error.main" }
-  }
-};
-function buildFilter(onCreate, createOptionLabel) {
-  return (available, params) => {
-    const filtered = filterOptions(available, params);
-    const input = params.inputValue.trim();
-    const alreadyExists = available.some(
-      (option) => option.label.toLowerCase() === input.toLowerCase()
-    );
-    if (input && !alreadyExists && onCreate) {
-      filtered.push({
-        value: `${CREATE_PREFIX}${input}`,
-        label: createOptionLabel(input),
-        isCreate: true
-      });
-    }
-    return filtered;
-  };
-}
-function renderIndentedOption(props, option, theme) {
-  const { key, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      ...rest,
-      style: { paddingLeft: rowInset(theme, option.depth ?? 0) },
-      children: option.label
-    },
-    key ?? option.value
-  );
-}
-function renderField(params, field) {
-  return /* @__PURE__ */ jsx(
-    TextField,
-    {
-      ...params,
-      id: field.inputId,
-      placeholder: field.placeholder,
-      error: Boolean(field.error),
-      size: MUI_SIZE[field.size],
-      sx: [fieldSx, (theme) => fieldControlStyles(theme, field.size)],
-      inputProps: { ...params.inputProps, "data-testid": `${field.dataTestId}-input` },
-      slotProps: {
-        input: {
-          ...params.InputProps,
-          endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-            field.loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: rem(field.theme, 18) }) : null,
-            params.InputProps.endAdornment
-          ] })
-        }
-      }
-    }
-  );
-}
-function useInternalOptions(options, value) {
-  const items = useMemo(
-    () => options.map(({ value: optionValue, label, depth }) => ({
-      value: optionValue,
-      label,
-      depth
-    })),
-    [options]
-  );
-  const selected = useMemo(
-    () => items.find((option) => option.value === value) ?? null,
-    [items, value]
-  );
-  return { items, selected };
-}
-function handlePick(next, onChange, onCreate) {
-  if (!next) {
-    onChange(null);
-    return;
-  }
-  if (next.isCreate) {
-    void onCreate?.(next.value.slice(CREATE_PREFIX.length));
-    return;
-  }
-  onChange(next.value);
-}
-function CreatableSelect({
-  options,
-  value,
-  onChange,
-  onCreate,
-  label,
-  error,
-  placeholder,
-  createOptionLabel,
-  noOptionsText,
-  disabled = false,
-  loading = false,
-  fullWidth = true,
-  size = "md",
-  dataTestId = "creatable-select"
-}) {
-  const inputId = useId();
-  const theme = useTheme();
-  const { items, selected } = useInternalOptions(options, value);
-  return /* @__PURE__ */ jsxs(FormControl, { fullWidth, error: Boolean(error), children: [
-    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: Boolean(error), children: label }),
-    /* @__PURE__ */ jsx(
-      Autocomplete,
-      {
-        value: selected,
-        options: items,
-        disabled,
-        loading,
-        fullWidth,
-        size: MUI_SIZE[size],
-        handleHomeEndKeys: true,
-        selectOnFocus: true,
-        clearOnBlur: true,
-        "data-testid": dataTestId,
-        noOptionsText,
-        slotProps: { popper: { sx: { zIndex: stackedOverlayZIndex } } },
-        getOptionLabel: (option) => typeof option === "string" ? option : option.label,
-        isOptionEqualToValue: (option, current) => option.value === current.value,
-        renderOption: (props, option) => renderIndentedOption(props, option, theme),
-        filterOptions: buildFilter(onCreate, createOptionLabel),
-        onChange: (_event, next) => handlePick(next, onChange, onCreate),
-        renderInput: (params) => renderField(params, { inputId, placeholder, error, loading, size, dataTestId, theme })
-      }
-    ),
-    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${dataTestId}-message`, children: error })
-  ] });
-}
-
-export {
-  CreatableSelect
-};
-//# sourceMappingURL=chunk-NCHYYSGZ.js.map

package/dist/chunk-NDMPXMW2.js

@@ -1,100 +0,0 @@
-import {
-  scrim,
-  shadowInk
-} from "./chunk-FQ6UW7IY.js";
-import {
-  rem,
-  rems
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/feedback/Modal/Modal.styles.ts
-import { alpha, keyframes } from "@mui/material/styles/index.js";
-var pulseAnimation = (theme) => keyframes`
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 1;
-  }
-  70% {
-    box-shadow: 0 0 0 ${rem(theme, 20)} currentColor;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0;
-  }
-`;
-var RADII = {
-  none: () => 0,
-  sm: (theme) => theme.spacing(0.5),
-  md: (theme) => theme.spacing(1),
-  lg: (theme) => theme.spacing(2),
-  xl: (theme) => theme.spacing(3)
-};
-var WIDTHS = { xs: 320, sm: 480, md: 640, lg: 800, xl: 960 };
-var PLACEMENTS = {
-  top: { top: "10%", left: "50%", transform: "translateX(-50%)", maxHeight: "80vh" },
-  bottom: { bottom: "10%", left: "50%", transform: "translateX(-50%)", maxHeight: "80vh" },
-  center: {
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    maxHeight: "90vh"
-  }
-};
-var pulseRing = (theme) => ({
-  content: '""',
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  borderRadius: "inherit",
-  backgroundColor: theme.palette.primary.main,
-  opacity: 0.3,
-  animation: `${pulseAnimation(theme)} 2s infinite`,
-  pointerEvents: "none",
-  zIndex: -1
-});
-var surface = (theme, flags) => {
-  const { variant, glass, gradient, glow } = flags;
-  const isGlass = glass || variant === "glass";
-  const boxShadow = glow ? `${rems(theme, 0, 0, 40)} ${alpha(theme.palette.primary.main, 0.3)}` : isGlass ? `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}` : theme.shadows[8];
-  return {
-    backgroundColor: isGlass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
-    backdropFilter: isGlass ? `blur(${rem(theme, 20)})` : gradient ? `blur(${rem(theme, 10)})` : "none",
-    border: isGlass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : "none",
-    boxShadow,
-    ...gradient && {
-      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`
-    }
-  };
-};
-var panelSx = (theme, flags) => {
-  const { variant, size, borderRadius, pulse } = flags;
-  return {
-    // A pulsing panel positions its own ring, so it becomes the containing block.
-    position: pulse ? "relative" : "absolute",
-    width: rem(theme, WIDTHS[size] ?? WIDTHS.md),
-    maxWidth: "90vw",
-    borderRadius: (RADII[borderRadius] ?? RADII.lg)(theme),
-    outline: 0,
-    overflowY: "auto",
-    transition: theme.transitions.create(
-      ["box-shadow", "background-color", "backdrop-filter", "transform"],
-      { duration: theme.transitions.duration.standard }
-    ),
-    ...PLACEMENTS[variant] ?? PLACEMENTS.center,
-    ...surface(theme, flags),
-    ...pulse && { "&::after": pulseRing(theme) }
-  };
-};
-var backdropSx = (theme, isGlass) => ({
-  backgroundColor: scrim(theme, isGlass ? 0.2 : 0.5),
-  backdropFilter: isGlass ? `blur(${rem(theme, 8)})` : "none"
-});
-
-export {
-  panelSx,
-  backdropSx
-};
-//# sourceMappingURL=chunk-NDMPXMW2.js.map

package/dist/chunk-NHMFBUBK.js

@@ -1,76 +0,0 @@
-import {
-  accentFor
-} from "./chunk-3IPPMWUA.js";
-import {
-  rem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/form/Menubar/Menubar.styles.ts
-import { alpha } from "@mui/material/styles/index.js";
-var SIZES = {
-  xs: (theme) => ({ minHeight: rem(theme, 40), fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),
-  sm: (theme) => ({ minHeight: rem(theme, 48), fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),
-  md: (theme) => ({ minHeight: rem(theme, 56), fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),
-  lg: (theme) => ({ minHeight: rem(theme, 64), fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),
-  xl: (theme) => ({ minHeight: rem(theme, 72), fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) })
-};
-var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
-var accentOf = (theme, color) => color === "neutral" ? theme.palette.primary.main : accentFor(theme, color).main;
-var colorStyles = (theme, color, transparent) => {
-  const surface = color === "neutral" ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary } : { backgroundColor: accentFor(theme, color).main, color: accentFor(theme, color).contrastText };
-  return transparent ? { ...surface, backgroundColor: "transparent" } : surface;
-};
-var SURFACES = {
-  glass: (theme, { glass }) => ({
-    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
-    backdropFilter: `blur(${rem(theme, 20)})`,
-    borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`
-  }),
-  gradient: (theme, { color, gradient }) => {
-    const accent = accentFor(theme, color === "neutral" ? "primary" : color);
-    return {
-      background: gradient ? `linear-gradient(135deg, ${accent.light}, ${accent.dark})` : accent.main,
-      color: accent.contrastText
-    };
-  },
-  elevated: (theme, { blur, elevation }) => ({
-    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
-    boxShadow: theme.shadows[elevation]
-  }),
-  minimal: (theme, { blur }) => ({
-    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
-    boxShadow: "none",
-    borderBottom: "none"
-  }),
-  bordered: (theme, { blur, color }) => ({
-    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
-    borderBottom: `${rem(theme, 2)} solid ${color === "neutral" ? theme.palette.divider : accentFor(theme, color).main}`
-  }),
-  default: (theme, { blur }) => ({ ...blur && { backdropFilter: `blur(${rem(theme, 10)})` } })
-};
-var barStyles = (theme, flags) => {
-  const { variant, size, color, glow, pulse, transparent } = flags;
-  return {
-    transition: theme.transitions.create(["all"], {
-      duration: theme.transitions.duration.standard
-    }),
-    ...sizeStyles(theme, size),
-    ...colorStyles(theme, color, transparent),
-    ...glow && { boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentOf(theme, color), 0.4)}` },
-    ...pulse && {
-      animation: "pulse 2s infinite",
-      "@keyframes pulse": {
-        "0%": { opacity: 1 },
-        "50%": { opacity: 0.8 },
-        "100%": { opacity: 1 }
-      }
-    },
-    ...(SURFACES[variant] ?? SURFACES.default)(theme, flags)
-  };
-};
-
-export {
-  sizeStyles,
-  barStyles
-};
-//# sourceMappingURL=chunk-NHMFBUBK.js.map