@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-BKQG2V5Z.js

@@ -0,0 +1,229 @@
+import {
+  onMedia,
+  uiInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/feedback/TutorialOverlay/TutorialStepBody.tsx
+import CompleteIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import PrevIcon from "@mui/icons-material/NavigateBefore";
+import NextIcon from "@mui/icons-material/NavigateNext";
+import RestartIcon from "@mui/icons-material/Refresh";
+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 Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepIndicator = styled(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+var StepDot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active" && prop !== "completed"
+})(({ theme, active, completed }) => ({
+  width: rem(theme, 8),
+  height: rem(theme, 8),
+  borderRadius: "50%",
+  background: completed ? theme.palette.success.main : active ? theme.palette.primary.main : alpha(theme.palette.text.primary, 0.3),
+  transition: "all 0.3s ease",
+  ...active && {
+    transform: "scale(1.5)"
+  }
+}));
+var TutorialStepNav = ({
+  copy,
+  currentStep,
+  stepCount,
+  isLastStep,
+  allowSkip,
+  requiresActionBeforeNext,
+  onNext,
+  onPrev,
+  onSkip,
+  onRestart
+}) => /* @__PURE__ */ jsxs(
+  Stack,
+  {
+    direction: "row",
+    spacing: 1,
+    justifyContent: "space-between",
+    "data-testid": "tutorial-navigation",
+    children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        allowSkip && /* @__PURE__ */ jsx(Button, { size: "small", onClick: onSkip, variant: "text", children: copy.skip }),
+        stepCount > 1 && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: onRestart,
+            disabled: currentStep === 0,
+            title: copy.restart,
+            children: /* @__PURE__ */ jsx(RestartIcon, { fontSize: "small" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        stepCount > 1 && currentStep > 0 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            startIcon: /* @__PURE__ */ jsx(PrevIcon, {}),
+            onClick: onPrev,
+            disabled: currentStep === 0,
+            "data-testid": "tutorial-prev-button",
+            children: copy.previous
+          }
+        ),
+        !isLastStep ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(NextIcon, {}),
+            onClick: onNext,
+            disabled: requiresActionBeforeNext,
+            title: requiresActionBeforeNext ? copy.requiresAction : "",
+            "data-testid": "tutorial-next-button",
+            children: copy.next
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(CompleteIcon, {}),
+            onClick: onNext,
+            sx: (theme) => {
+              const [from, to] = uiInk(theme).celebration.mint;
+              return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)` };
+            },
+            "data-testid": "tutorial-finish-button",
+            children: stepCount === 1 ? copy.complete : copy.finish
+          }
+        )
+      ] })
+    ]
+  }
+);
+var StepDots = ({
+  currentStep,
+  stepCount
+}) => /* @__PURE__ */ jsx(StepIndicator, { "data-testid": "tutorial-step-indicators", children: Array.from({ length: stepCount }).map((_, index) => /* @__PURE__ */ jsx(
+  StepDot,
+  {
+    active: index === currentStep,
+    completed: index < currentStep,
+    "data-testid": `tutorial-indicator-${index}`
+  },
+  index
+)) });
+var TutorialStepHeader = ({ title, currentStep, allowSkip, onSkip }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+    children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          id: `tutorial-title-${currentStep}`,
+          variant: "h6",
+          fontWeight: "bold",
+          sx: { flex: 1 },
+          "data-testid": "tutorial-step-title",
+          children: title
+        }
+      ),
+      allowSkip && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: onSkip,
+          sx: { ml: 1, mt: -1, mr: -1 },
+          "data-testid": "tutorial-close-button",
+          children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+        }
+      )
+    ]
+  }
+);
+var TutorialStepBody = ({
+  copy,
+  step,
+  currentStep,
+  stepCount,
+  progress: _progress,
+  isLastStep,
+  allowSkip,
+  showProgress,
+  requiresActionBeforeNext,
+  onNext,
+  onPrev,
+  onSkip,
+  onRestart
+}) => /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+  /* @__PURE__ */ jsx(
+    TutorialStepHeader,
+    {
+      title: step.title,
+      currentStep,
+      allowSkip,
+      onSkip
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      id: `tutorial-content-${currentStep}`,
+      variant: "body2",
+      color: "text.secondary",
+      "data-testid": "tutorial-step-content",
+      children: step.content
+    }
+  ),
+  showProgress && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", align: "center", children: [
+    currentStep + 1,
+    " of ",
+    stepCount
+  ] }),
+  step.action && /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "contained",
+      size: "small",
+      onClick: step.action.onClick,
+      sx: (theme) => {
+        const [from, to] = uiInk(theme).celebration.violet;
+        return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)`, color: onMedia(theme) };
+      },
+      children: step.action.label
+    }
+  ),
+  /* @__PURE__ */ jsx(StepDots, { currentStep, stepCount }),
+  /* @__PURE__ */ jsx(
+    TutorialStepNav,
+    {
+      copy,
+      currentStep,
+      stepCount,
+      isLastStep,
+      allowSkip,
+      requiresActionBeforeNext,
+      onNext,
+      onPrev,
+      onSkip,
+      onRestart
+    }
+  )
+] });
+
+export {
+  TutorialStepBody
+};
+//# sourceMappingURL=chunk-BKQG2V5Z.js.map

package/dist/chunk-BLINEMVO.js

@@ -0,0 +1,67 @@
+import {
+  statusMessage
+} from "./chunk-AO4NDR6W.js";
+import {
+  DayBoundInput
+} from "./chunk-5AQLJ4AL.js";
+
+// src/components/form/DateRangePicker/DateRangePickerFields.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DateRangeFields({
+  value,
+  status,
+  messages,
+  maxRangeDays,
+  onEdit,
+  statusId,
+  dataTestId
+}) {
+  const rejected = !status.ok && status.problem !== "incomplete";
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 2 }, children: [
+      /* @__PURE__ */ jsx(
+        DayBoundInput,
+        {
+          mask: messages.dayMask,
+          label: messages.from,
+          value: value.from ?? void 0,
+          onChange: (bound) => onEdit("from", bound ?? null),
+          testId: `${dataTestId}-from`,
+          error: rejected,
+          describedBy: statusId
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DayBoundInput,
+        {
+          mask: messages.dayMask,
+          label: messages.to,
+          value: value.to ?? void 0,
+          onChange: (bound) => onEdit("to", bound ?? null),
+          testId: `${dataTestId}-to`,
+          error: rejected,
+          describedBy: statusId
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: statusId,
+        role: "status",
+        "aria-live": "polite",
+        variant: "body2",
+        color: rejected ? "error.main" : "text.secondary",
+        "data-testid": `${dataTestId}-status`,
+        children: statusMessage(status, messages, maxRangeDays)
+      }
+    )
+  ] });
+}
+
+export {
+  DateRangeFields
+};
+//# sourceMappingURL=chunk-BLINEMVO.js.map

package/dist/chunk-BRHRK7BK.js

@@ -0,0 +1,69 @@
+import {
+  chipDensityOverrides,
+  iconButtonDensityOverrides
+} from "./chunk-25MSGLNU.js";
+import {
+  checkboxRadioDensityOverrides,
+  switchDensityOverrides
+} from "./chunk-GAXHYRX6.js";
+import {
+  paginationItemDensityOverrides,
+  sliderDensityOverrides,
+  tabDensityOverrides,
+  tableCellDensityOverrides,
+  tabsIndicatorDensityOverrides,
+  toggleButtonDensityOverrides
+} from "./chunk-NP6SHLQ3.js";
+import {
+  fieldOverrides,
+  mergeMuiComponents
+} from "./chunk-RGVNXES5.js";
+import {
+  densityFieldHeight,
+  densityFontSize,
+  densitySpacingUnit,
+  resolveDensityFactor
+} from "./chunk-VBP46YP4.js";
+import {
+  DEFAULT_FIELD_RADIUS
+} from "./chunk-26X4CZVR.js";
+
+// src/tokens/density.ts
+import { useTheme } from "@mui/material/styles/index.js";
+function useDensity() {
+  return useTheme().density ?? resolveDensityFactor();
+}
+function densityThemeOptions(density, factors, fieldRadius = DEFAULT_FIELD_RADIUS) {
+  const { factor } = resolveDensityFactor(density, factors);
+  const fieldHeight = densityFieldHeight(factor);
+  return {
+    typography: { fontSize: densityFontSize(factor) },
+    spacing: densitySpacingUnit(factor),
+    fieldHeight,
+    // A standalone host (never `createUiTheme`/`UiProvider`) that draws its
+    // OWN, non-default radius states it through this 3rd argument; reporting
+    // it back here (FUT-2967) lets `@12-apps/app-shell`'s `createAppTheme`
+    // spread this object's OWN `fieldRadius` into its `createTheme()` call
+    // instead of tracking the number separately — the two can never disagree.
+    fieldRadius,
+    components: mergeMuiComponents(
+      fieldOverrides(fieldRadius, fieldHeight),
+      iconButtonDensityOverrides(),
+      chipDensityOverrides(),
+      checkboxRadioDensityOverrides(),
+      switchDensityOverrides(),
+      toggleButtonDensityOverrides(),
+      tabDensityOverrides(),
+      tabsIndicatorDensityOverrides(),
+      tableCellDensityOverrides(),
+      paginationItemDensityOverrides(),
+      sliderDensityOverrides()
+    )
+  };
+}
+
+export {
+  useDensity,
+  densityThemeOptions
+};
+//# sourceMappingURL=chunk-BRHRK7BK.js.map

package/dist/chunk-BTJFOPCQ.js

@@ -0,0 +1,65 @@
+import {
+  buildGridColumns,
+  buildRowActionsColumn,
+  isActionsColumn
+} from "./chunk-NQZNV3VR.js";
+
+// src/components/data-display/DataViews/data-views-columns.ts
+import { useTheme } from "@mui/material/styles/index.js";
+import { useMemo } from "react";
+function computeHideableColumns(columns) {
+  return columns.filter((col) => col.hideable !== false && typeof col.header === "string" && col.header !== "").map((col) => ({ id: col.id, label: col.header }));
+}
+function appendActionsColumn(columns, opts) {
+  const { theme, rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
+  if (!rowActions && !renderRowMenu || columns.some(isActionsColumn)) return columns;
+  return [
+    ...columns,
+    buildRowActionsColumn({
+      theme,
+      rowActions: rowActions ?? [],
+      leading: rowActionsLeading,
+      testIdPrefix,
+      getRowId,
+      renderRowMenu
+    })
+  ];
+}
+function useColumnsWithActions(columns, opts) {
+  const { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
+  const theme = useTheme();
+  const columnsWithActions = useMemo(
+    () => appendActionsColumn(columns, {
+      theme,
+      rowActions,
+      rowActionsLeading,
+      renderRowMenu,
+      testIdPrefix,
+      getRowId
+    }),
+    [columns, theme, rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId]
+  );
+  const allColumnIds = useMemo(() => columnsWithActions.map((col) => col.id), [columnsWithActions]);
+  return { columnsWithActions, allColumnIds };
+}
+function applyOrder(columns, order) {
+  if (!order || order.length === 0) return columns;
+  const byId = new Map(columns.map((column) => [column.id, column]));
+  const ordered = order.map((id) => byId.get(id)).filter((c) => Boolean(c));
+  const seen = new Set(ordered.map((column) => column.id));
+  return [...ordered, ...columns.filter((column) => !seen.has(column.id))];
+}
+function useRenderedColumns(columnsWithActions, visibleColumns, onRowClick, order) {
+  const gridColumns = useMemo(
+    () => buildGridColumns(applyOrder(columnsWithActions, order), visibleColumns, onRowClick),
+    [columnsWithActions, onRowClick, visibleColumns, order]
+  );
+  const hideableColumns = useMemo(() => computeHideableColumns(columnsWithActions), [columnsWithActions]);
+  return { gridColumns, hideableColumns };
+}
+
+export {
+  useColumnsWithActions,
+  useRenderedColumns
+};
+//# sourceMappingURL=chunk-BTJFOPCQ.js.map

package/dist/chunk-C67FDYG7.js

@@ -0,0 +1,66 @@
+import {
+  getAxisStyles,
+  getDefaultColors,
+  getSizeStyles,
+  resolveSeries
+} from "./chunk-FIMSPRKX.js";
+import {
+  resolveAxisConfig,
+  resolveBarGeometry
+} from "./chunk-SOHQPPYJ.js";
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/chart-context.ts
+function buildChartContext(props, theme) {
+  const sizeStyles = getSizeStyles(theme, props.size, props.height);
+  const chartColors = getDefaultColors(theme, props.variant ?? "default", props.colors);
+  const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(
+    theme,
+    props.variant ?? "default",
+    sizeStyles.fontSize
+  );
+  const handleChartClick = (payload) => {
+    const chartData = payload;
+    if (props.onClick && chartData?.activePayload?.[0]) {
+      props.onClick(chartData.activePayload[0].payload);
+    }
+  };
+  return {
+    props,
+    theme,
+    sizeStyles,
+    chartColors,
+    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? "name", chartColors),
+    strokeType: props.curved ?? true ? "monotone" : "linear",
+    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },
+    gridStroke,
+    gridOpacity,
+    axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),
+    barGeometry: resolveBarGeometry(props, theme),
+    animationDuration: props.animate ?? true ? props.animationDuration ?? 1500 : 0,
+    commonProps: {
+      data: props.data,
+      margin: {
+        top: remPx(theme, 20),
+        right: remPx(theme, 30),
+        left: remPx(theme, 20),
+        bottom: remPx(theme, 20),
+        ...marginPx(theme, props.margin)
+      },
+      onClick: handleChartClick
+    }
+  };
+}
+function marginPx(theme, margin) {
+  if (!margin) return void 0;
+  return Object.fromEntries(
+    Object.entries(margin).map(([side, px]) => [side, typeof px === "number" ? remPx(theme, px) : px])
+  );
+}
+
+export {
+  buildChartContext
+};
+//# sourceMappingURL=chunk-C67FDYG7.js.map

package/dist/chunk-CBO46LJH.js

@@ -0,0 +1,174 @@
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-D6KL74KI.js";
+import {
+  fieldControlStyles
+} from "./chunk-RGVNXES5.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.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-CBO46LJH.js.map