@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-2JTZWQ25.js

@@ -1,142 +0,0 @@
-import {
-  errorStyles,
-  headerStyles,
-  iconStyles,
-  titleStyles
-} from "./chunk-WE2LNTR6.js";
-import {
-  SETTING_CARD
-} from "./chunk-BFRVMCQM.js";
-import {
-  Collapsible
-} from "./chunk-JYWF76Z5.js";
-import {
-  Chip
-} from "./chunk-OZPLAOI4.js";
-import {
-  Icon
-} from "./chunk-VEHMODO3.js";
-import {
-  Button
-} from "./chunk-RIZRF5XR.js";
-import {
-  BUTTON_SIZES
-} from "./chunk-LN46DSMF.js";
-import {
-  rem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/layout/SettingCard/SettingCard.parts.tsx
-import Box from "@mui/material/Box/index.js";
-import CircularProgress from "@mui/material/CircularProgress/index.js";
-import { useTheme } from "@mui/material/styles/index.js";
-import { useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var partTestId = (root, part) => root ? `${root}-${part}` : void 0;
-var SettingHeader = ({
-  titleId,
-  title,
-  headingLevel,
-  icon,
-  status,
-  trailing,
-  labelFor,
-  info,
-  dataTestId
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(Box, { sx: headerStyles(theme), children: [
-    icon && /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, sx: iconStyles(theme), children: icon }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 1, minWidth: 0, flex: 1 }, children: [
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          component: labelFor ? "label" : headingLevel,
-          id: titleId,
-          htmlFor: labelFor,
-          sx: { ...titleStyles(theme), ...labelFor ? { cursor: "pointer" } : {} },
-          "data-testid": partTestId(dataTestId, "title"),
-          children: title
-        }
-      ),
-      status && /* @__PURE__ */ jsx(
-        Chip,
-        {
-          label: status.label,
-          color: status.color ?? "neutral",
-          size: "sm",
-          variant: "outlined",
-          dataTestId: partTestId(dataTestId, "status")
-        }
-      ),
-      info
-    ] }),
-    trailing
-  ] });
-};
-var SaveError = ({
-  id,
-  message,
-  dataTestId
-}) => {
-  const theme = useTheme();
-  if (!message) return null;
-  return /* @__PURE__ */ jsx(Box, { component: "p", id, role: "alert", sx: errorStyles(theme), "data-testid": partTestId(dataTestId, "error"), children: message });
-};
-var PendingSpinner = ({ dataTestId }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    CircularProgress,
-    {
-      size: rem(theme, SETTING_CARD.spinnerSize),
-      color: "inherit",
-      "aria-hidden": true,
-      "data-testid": partTestId(dataTestId, "saving")
-    }
-  );
-};
-var LearnMore = ({ label, children, dataTestId }) => {
-  const [expanded, setExpanded] = useState(false);
-  const regionId = useId();
-  const theme = useTheme();
-  return (
-    // Pulled out by the button's own padding, so the words line up with the form above.
-    /* @__PURE__ */ jsxs(Box, { sx: { marginLeft: `-${rem(theme, BUTTON_SIZES.sm.paddingHorizontal)}` }, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "text",
-          size: "sm",
-          "aria-expanded": expanded,
-          "aria-controls": regionId,
-          onClick: () => setExpanded((was) => !was),
-          icon: /* @__PURE__ */ jsx(
-            Box,
-            {
-              component: "span",
-              sx: {
-                display: "inline-flex",
-                transform: expanded ? "rotate(180deg)" : "none",
-                transition: theme.transitions.create("transform")
-              },
-              children: /* @__PURE__ */ jsx(Icon, { name: "ExpandMore", size: "xs" })
-            }
-          ),
-          iconPosition: "right",
-          dataTestId: partTestId(dataTestId, "learn-more"),
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsx(Collapsible, { open: expanded, keepMounted: true, sx: { marginLeft: rem(theme, BUTTON_SIZES.sm.paddingHorizontal) }, dataTestId: partTestId(dataTestId, "learn-more-content"), children: /* @__PURE__ */ jsx(Box, { id: regionId, sx: { ...theme.typography.body2, color: "text.secondary", pt: 1 }, children }) })
-    ] })
-  );
-};
-
-export {
-  partTestId,
-  SettingHeader,
-  SaveError,
-  PendingSpinner,
-  LearnMore
-};
-//# sourceMappingURL=chunk-2JTZWQ25.js.map

package/dist/chunk-2KVWOTEQ.js

@@ -1,246 +0,0 @@
-import {
-  progressLabelText,
-  resolveProgressProps
-} from "./chunk-5JEOLUWJ.js";
-import {
-  barEmphasisStyles,
-  barVariantStyles,
-  circularEmphasisStyles,
-  getColorFromTheme,
-  getSizeStyles,
-  pulseAnimation
-} from "./chunk-6REPQ352.js";
-import {
-  rem,
-  rems
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/Progress/Progress.tsx
-import Box from "@mui/material/Box/index.js";
-import CircularProgress from "@mui/material/CircularProgress/index.js";
-import LinearProgress from "@mui/material/LinearProgress/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var StyledLinearProgress = styled(LinearProgress, {
-  shouldForwardProp: (prop) => !["customVariant", "customSize", "customColor", "glow", "pulse"].includes(prop)
-})(({ theme, customVariant, customSize, customColor = "primary", glow, pulse }) => {
-  const colorPalette = getColorFromTheme(theme, customColor);
-  const sizeStyles = getSizeStyles(customSize);
-  return {
-    height: rem(theme, sizeStyles.heightPx),
-    borderRadius: rem(theme, sizeStyles.heightPx / 2),
-    backgroundColor: alpha(colorPalette.main, 0.1),
-    "& .MuiLinearProgress-bar": {
-      borderRadius: "inherit",
-      transition: "all 0.3s ease",
-      ...barVariantStyles(theme, customVariant, colorPalette),
-      ...barEmphasisStyles(theme, colorPalette, glow, pulse)
-    }
-  };
-});
-var StyledCircularProgress = styled(CircularProgress, {
-  shouldForwardProp: (prop) => !["customColor", "glow", "pulse"].includes(prop)
-})(({ theme, customColor = "primary", glow, pulse }) => {
-  const colorPalette = getColorFromTheme(theme, customColor);
-  return {
-    color: colorPalette.main,
-    ...circularEmphasisStyles(theme, colorPalette, glow, pulse)
-  };
-});
-var SegmentedProgress = ({ value = 0, segments, color, size, glow, pulse, dataTestId }) => {
-  const theme = useTheme();
-  const colorPalette = getColorFromTheme(theme, color);
-  const sizeStyles = getSizeStyles(size);
-  const filledSegments = Math.floor(value / 100 * segments);
-  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5, width: "100%" }, "data-testid": `${dataTestId}-segments-container`, children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx(
-    Box,
-    {
-      "data-testid": `${dataTestId}-segment-${index}`,
-      sx: {
-        flex: 1,
-        height: rem(theme, sizeStyles.heightPx),
-        // In `sx` a numeric radius is a multiple of `shape.borderRadius` — relative already.
-        borderRadius: sizeStyles.heightPx / 2,
-        backgroundColor: index < filledSegments ? colorPalette.main : alpha(colorPalette.main, 0.1),
-        transition: "all 0.3s ease",
-        ...glow && index < filledSegments && {
-          boxShadow: `${rems(theme, 0, 0, 6, 1)} ${alpha(colorPalette.main, 0.4)}`
-        },
-        ...pulse && index < filledSegments && {
-          animation: `${pulseAnimation} 2s infinite`
-        }
-      }
-    },
-    index
-  )) });
-};
-var ProgressLabel = ({
-  size,
-  label,
-  testId
-}) => /* @__PURE__ */ jsx(
-  Typography,
-  {
-    variant: "caption",
-    sx: {
-      display: "block",
-      textAlign: "center",
-      mt: 1,
-      fontSize: getSizeStyles(size).fontSize,
-      fontWeight: 600
-    },
-    "data-testid": testId,
-    children: label
-  }
-);
-var CircularView = React.forwardRef(
-  ({
-    size,
-    color,
-    glow,
-    pulse,
-    showLabel,
-    displayValue,
-    displayLabel,
-    value,
-    dataTestId,
-    thickness,
-    circularSize,
-    ...props
-  }, ref) => {
-    const theme = useTheme();
-    const sizeStyles = getSizeStyles(size);
-    return /* @__PURE__ */ jsxs(Box, { ref, sx: { position: "relative", display: "inline-flex" }, "data-testid": dataTestId, children: [
-      /* @__PURE__ */ jsx(
-        StyledCircularProgress,
-        {
-          variant: value !== void 0 ? "determinate" : "indeterminate",
-          value: displayValue,
-          size: rem(theme, circularSize || sizeStyles.circularSizePx),
-          thickness,
-          customColor: color,
-          glow,
-          pulse,
-          "data-testid": `${dataTestId}-circular`,
-          ...props
-        }
-      ),
-      showLabel && value !== void 0 && /* @__PURE__ */ jsx(
-        Box,
-        {
-          sx: {
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            position: "absolute",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "caption",
-              component: "div",
-              color: "text.secondary",
-              sx: { fontSize: sizeStyles.fontSize, fontWeight: 600 },
-              "data-testid": `${dataTestId}-label`,
-              children: displayLabel
-            }
-          )
-        }
-      )
-    ] });
-  }
-);
-CircularView.displayName = "ProgressCircularView";
-var SegmentedView = React.forwardRef(
-  ({ size, color, glow, pulse, showLabel, displayValue, displayLabel, dataTestId, segments, value: _value, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, sx: { width: "100%" }, "data-testid": dataTestId, ...props, children: [
-    /* @__PURE__ */ jsx(
-      SegmentedProgress,
-      {
-        value: displayValue,
-        segments,
-        color,
-        size,
-        glow,
-        pulse,
-        dataTestId
-      }
-    ),
-    showLabel && /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testId: `${dataTestId}-label` })
-  ] })
-);
-SegmentedView.displayName = "ProgressSegmentedView";
-var LinearView = React.forwardRef(
-  ({ size, color, glow, pulse, showLabel, displayValue, displayLabel, value, dataTestId, variant, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, sx: { width: "100%" }, "data-testid": dataTestId, children: [
-    /* @__PURE__ */ jsx(
-      StyledLinearProgress,
-      {
-        variant: value !== void 0 ? "determinate" : "indeterminate",
-        value: displayValue,
-        customVariant: variant,
-        customSize: size,
-        customColor: color,
-        glow,
-        pulse,
-        "data-testid": `${dataTestId}-linear`,
-        ...props
-      }
-    ),
-    showLabel && /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testId: `${dataTestId}-label` })
-  ] })
-);
-LinearView.displayName = "ProgressLinearView";
-var Progress = React.forwardRef(
-  (rawProps, ref) => {
-    const {
-      variant,
-      size,
-      color,
-      glow,
-      pulse,
-      showLabel,
-      label,
-      segments,
-      thickness,
-      circularSize,
-      value,
-      dataTestId,
-      testID,
-      ...props
-    } = resolveProgressProps(rawProps);
-    const displayValue = value || 0;
-    const shared = {
-      size,
-      color,
-      glow,
-      pulse,
-      showLabel,
-      displayValue,
-      displayLabel: progressLabelText(label, showLabel, displayValue),
-      value,
-      // `testID` is React Native's spelling of the same id and names the
-      // component too; `data-testid` is left in `props`, on its way to the
-      // element the caller means to address, where it has always landed.
-      dataTestId: testID ?? dataTestId,
-      ...props
-    };
-    if (variant === "circular") {
-      return /* @__PURE__ */ jsx(CircularView, { ref, ...shared, thickness, circularSize });
-    }
-    if (variant === "segmented") {
-      return /* @__PURE__ */ jsx(SegmentedView, { ref, ...shared, segments });
-    }
-    return /* @__PURE__ */ jsx(LinearView, { ref, ...shared, variant });
-  }
-);
-Progress.displayName = "Progress";
-
-export {
-  Progress
-};
-//# sourceMappingURL=chunk-2KVWOTEQ.js.map

package/dist/chunk-2NIQSL7M.js

@@ -1,28 +0,0 @@
-import {
-  DropdownMenu
-} from "./chunk-U3DBQXPI.js";
-import {
-  Button
-} from "./chunk-RIZRF5XR.js";
-
-// src/components/data-display/CardKit/CardKebab.tsx
-import { jsx } from "react/jsx-runtime";
-function CardKebab({
-  items,
-  menuLabel,
-  dataTestId
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenu,
-    {
-      size: "sm",
-      items,
-      trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", "aria-label": menuLabel, dataTestId, children: "\u22EE" })
-    }
-  );
-}
-
-export {
-  CardKebab
-};
-//# sourceMappingURL=chunk-2NIQSL7M.js.map

package/dist/chunk-2QUUCEDC.js

@@ -1,278 +0,0 @@
-import {
-  InlineTrigger,
-  PillTrigger,
-  StackedTrigger,
-  buildTriggerLabel
-} from "./chunk-VQ5GKEGO.js";
-import {
-  fieldTextFieldStyles
-} from "./chunk-2TZ6X265.js";
-import {
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/layout/ContentToolbar/MultiSelectDropdown.tsx
-import SearchIcon from "@mui/icons-material/Search";
-import Box from "@mui/material/Box/index.js";
-import Button from "@mui/material/Button/index.js";
-import Checkbox from "@mui/material/Checkbox/index.js";
-import Divider from "@mui/material/Divider/index.js";
-import InputAdornment from "@mui/material/InputAdornment/index.js";
-import ListSubheader from "@mui/material/ListSubheader/index.js";
-import Menu from "@mui/material/Menu/index.js";
-import MenuItem from "@mui/material/MenuItem/index.js";
-import TextField from "@mui/material/TextField/index.js";
-import { useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function CheckboxRow({
-  label,
-  count,
-  checked,
-  onToggle
-}) {
-  return /* @__PURE__ */ jsxs(MenuItem, { onClick: () => onToggle(!checked), sx: { gap: 1 }, children: [
-    /* @__PURE__ */ jsx(Checkbox, { checked, size: "small", disableRipple: true, sx: { p: 0, pointerEvents: "none" }, tabIndex: -1 }),
-    /* @__PURE__ */ jsxs(Box, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
-      label,
-      count != null && /* @__PURE__ */ jsxs(Box, { component: "span", sx: { color: "text.secondary" }, children: [
-        " ",
-        "(",
-        count,
-        ")"
-      ] })
-    ] })
-  ] });
-}
-function MultiSelectDropdown({
-  label,
-  options,
-  selected,
-  onToggle,
-  onClear,
-  allLabel = "All",
-  clearLabel,
-  clearText,
-  extraOptionsHeading,
-  extraOptions,
-  searchable,
-  searchPlaceholder = "Search\u2026",
-  noResultsLabel = "No results",
-  layout = "inline",
-  "data-testid": testId,
-  onOpenChange
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [query, setQuery] = useState("");
-  const open = Boolean(anchorEl);
-  const stacked = layout === "stacked";
-  const close = () => {
-    setAnchorEl(null);
-    setQuery("");
-    onOpenChange?.(false);
-  };
-  const triggerLabel = buildTriggerLabel(selected, options, allLabel);
-  const showSearch = searchable ?? options.length > 8;
-  const anyExtraChecked = extraOptions?.some((option) => option.checked) ?? false;
-  const clearDisabled = selected.size === 0 && !anyExtraChecked;
-  const openMenu = (event) => {
-    setAnchorEl(event.currentTarget);
-    onOpenChange?.(true);
-  };
-  const triggerProps = { triggerLabel, open, onOpen: openMenu, testId };
-  const renderTrigger = () => {
-    if (stacked) return /* @__PURE__ */ jsx(StackedTrigger, { label, ...triggerProps });
-    if (layout === "pill")
-      return /* @__PURE__ */ jsx(
-        PillTrigger,
-        {
-          clearLabel,
-          label,
-          selectedCount: selected.size,
-          onClear,
-          ...triggerProps
-        }
-      );
-    return /* @__PURE__ */ jsx(InlineTrigger, { label, ...triggerProps });
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderTrigger(),
-    /* @__PURE__ */ jsx(
-      MultiSelectMenu,
-      {
-        extraOptionsHeading,
-        clearText,
-        anchorEl,
-        open,
-        close,
-        options,
-        selected,
-        onToggle,
-        extraOptions,
-        clearDisabled,
-        onClear,
-        showSearch,
-        query,
-        onQueryChange: setQuery,
-        searchPlaceholder,
-        noResultsLabel,
-        matchAnchorWidth: stacked,
-        testId
-      }
-    )
-  ] });
-}
-function MenuSearchField({
-  query,
-  onQueryChange,
-  placeholder,
-  testId
-}) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: { position: "sticky", top: 0, zIndex: 1, bgcolor: "background.paper", px: 1, py: 0.75 },
-      onKeyDown: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ jsx(
-        TextField,
-        {
-          autoFocus: true,
-          size: "small",
-          sx: fieldTextFieldStyles,
-          fullWidth: true,
-          value: query,
-          onChange: (event) => onQueryChange(event.target.value),
-          placeholder,
-          inputProps: { "aria-label": placeholder, "data-testid": testId ? `${testId}-search` : void 0 },
-          InputProps: {
-            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(16) } }) })
-          }
-        }
-      )
-    }
-  );
-}
-function resolveMenuPlacement(matchAnchorWidth, anchorEl) {
-  if (!matchAnchorWidth) return { anchorWidth: void 0, align: "right" };
-  return { anchorWidth: anchorEl?.offsetWidth, align: "left" };
-}
-function MultiSelectMenu({
-  anchorEl,
-  open,
-  close,
-  options,
-  selected,
-  onToggle,
-  extraOptions,
-  extraOptionsHeading,
-  clearText,
-  clearDisabled,
-  onClear,
-  showSearch,
-  query,
-  onQueryChange,
-  searchPlaceholder,
-  noResultsLabel,
-  matchAnchorWidth,
-  testId
-}) {
-  const trimmed = query.trim().toLowerCase();
-  const visibleOptions = useMemo(
-    () => trimmed ? options.filter((option) => option.label.toLowerCase().includes(trimmed)) : options,
-    [options, trimmed]
-  );
-  const { anchorWidth, align } = resolveMenuPlacement(matchAnchorWidth, anchorEl);
-  return /* @__PURE__ */ jsxs(
-    Menu,
-    {
-      anchorEl,
-      open,
-      onClose: close,
-      anchorOrigin: { vertical: "bottom", horizontal: align },
-      transformOrigin: { vertical: "top", horizontal: align },
-      autoFocus: !showSearch,
-      disableAutoFocusItem: true,
-      slotProps: {
-        // Cap the height so a long list (e.g. many categories) scrolls instead
-        // of running off-screen; the sticky search box stays pinned on top.
-        paper: { sx: { minWidth: anchorWidth ?? sxRem(180), width: anchorWidth, maxHeight: sxRem(360) } },
-        list: { sx: { pt: showSearch ? 0 : void 0, pb: 0 } }
-      },
-      children: [
-        showSearch && /* @__PURE__ */ jsx(MenuSearchField, { query, onQueryChange, placeholder: searchPlaceholder, testId }),
-        visibleOptions.length === 0 && showSearch ? /* @__PURE__ */ jsx(MenuItem, { disabled: true, "data-testid": testId ? `${testId}-no-results` : void 0, sx: { fontSize: sxRem(13) }, children: noResultsLabel }) : visibleOptions.map((option) => /* @__PURE__ */ jsx(
-          CheckboxRow,
-          {
-            label: option.label,
-            count: option.count,
-            checked: selected.has(option.value),
-            onToggle: (next) => onToggle(option.value, next)
-          },
-          option.value
-        )),
-        extraOptions && extraOptions.length > 0 ? [
-          /* @__PURE__ */ jsx(Divider, {}, "extra-divider"),
-          /* @__PURE__ */ jsx(ListSubheader, { sx: { px: 1, py: 0.75, fontSize: sxRem(12), fontWeight: 600 }, children: extraOptionsHeading }, "extra-label"),
-          ...extraOptions.map((extra) => /* @__PURE__ */ jsx(CheckboxRow, { label: extra.label, checked: extra.checked, onToggle: (next) => extra.onCheckedChange(next) }, extra.id))
-        ] : null,
-        /* @__PURE__ */ jsx(
-          MenuClearFooter,
-          {
-            clearText,
-            clearDisabled,
-            onClear,
-            close,
-            testId
-          }
-        )
-      ]
-    }
-  );
-}
-function MenuClearFooter({
-  clearText,
-  clearDisabled,
-  onClear,
-  close,
-  testId
-}) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: {
-        // Pin to the bottom of the scroll viewport so it stays visible while the
-        // options list scrolls (mirrors the sticky search box on top).
-        position: "sticky",
-        bottom: 0,
-        zIndex: 1,
-        display: "flex",
-        justifyContent: "flex-end",
-        borderTop: 1,
-        borderColor: "divider",
-        bgcolor: "background.paper",
-        px: 1,
-        py: 0.75
-      },
-      children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "text",
-          size: "small",
-          color: "inherit",
-          "data-testid": testId ? `${testId}-clear` : void 0,
-          disabled: clearDisabled,
-          onClick: () => {
-            onClear();
-            close();
-          },
-          sx: { minWidth: 0, px: 1, py: 0.25, fontSize: sxRem(12), fontWeight: 400, textTransform: "none", color: "text.secondary" },
-          children: clearText
-        }
-      )
-    }
-  );
-}
-
-export {
-  MultiSelectDropdown
-};
-//# sourceMappingURL=chunk-2QUUCEDC.js.map