@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-JXTJI2YF.js

@@ -1,120 +0,0 @@
-import {
-  fieldTextFieldStyles
-} from "./chunk-2TZ6X265.js";
-import {
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/DataViews/data-views-day-input.tsx
-import TextField from "@mui/material/TextField/index.js";
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var SEGMENT_WIDTH = { year: 4, month: 2, day: 2 };
-function segmentsOf(mask) {
-  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);
-  if (tokens.length !== 3) return ["day", "month", "year"];
-  const segments = tokens.map((token) => {
-    const head = token.slice(0, 1).toLowerCase();
-    if (head === "y" || head === "a") return "year";
-    return head === "m" ? "month" : "day";
-  });
-  return new Set(segments).size === 3 ? segments : ["day", "month", "year"];
-}
-var separatorOf = (mask) => mask.replace(/[A-Za-z]/g, "").slice(0, 1) || "/";
-function isoToMasked(iso, mask) {
-  const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-  if (!parts) return "";
-  const value = {
-    year: parts[1],
-    month: parts[2],
-    day: parts[3]
-  };
-  return segmentsOf(mask).map((segment) => value[segment]).join(separatorOf(mask));
-}
-function maskedToIso(text, mask) {
-  const segments = segmentsOf(mask);
-  const digits = text.replace(/\D/g, "");
-  if (digits.length !== 8) return "";
-  const value = {};
-  let cursor = 0;
-  for (const segment of segments) {
-    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);
-    cursor += SEGMENT_WIDTH[segment];
-  }
-  const year = Number(value.year);
-  const month = Number(value.month);
-  const day = Number(value.day);
-  if (year < 1e3) return "";
-  const probe = new Date(Date.UTC(year, month - 1, day));
-  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return "";
-  return `${value.year}-${value.month}-${value.day}`;
-}
-function maskDate(raw, mask) {
-  const segments = segmentsOf(mask);
-  const separator = separatorOf(mask);
-  const digits = raw.replace(/\D/g, "").slice(0, 8);
-  const out = [];
-  let cursor = 0;
-  for (const segment of segments) {
-    if (cursor >= digits.length) break;
-    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));
-    cursor += SEGMENT_WIDTH[segment];
-  }
-  return out.join(separator);
-}
-function dayInputProps(testId, describedBy) {
-  return {
-    "data-testid": testId,
-    maxLength: 10,
-    inputMode: "numeric",
-    autoComplete: "off",
-    ...describedBy ? { "aria-describedby": describedBy } : {}
-  };
-}
-function DayBoundInput({
-  label,
-  value,
-  onChange,
-  testId,
-  error = false,
-  describedBy,
-  mask
-}) {
-  const applied = value ?? "";
-  const [text, setText] = useState(() => isoToMasked(applied, mask));
-  useEffect(() => {
-    setText(
-      (current) => maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask)
-    );
-  }, [applied, mask]);
-  return /* @__PURE__ */ jsx(
-    TextField,
-    {
-      size: "small",
-      type: "text",
-      label,
-      error,
-      placeholder: mask,
-      value: text,
-      onChange: (event) => {
-        const next = maskDate(event.target.value, mask);
-        setText(next);
-        if (next === "") return onChange(void 0);
-        const iso = maskedToIso(next, mask);
-        if (iso) onChange(iso);
-      },
-      onBlur: () => setText(isoToMasked(applied, mask)),
-      InputLabelProps: { shrink: true },
-      inputProps: dayInputProps(testId, describedBy),
-      sx: [{ width: sxRem(165) }, fieldTextFieldStyles]
-    }
-  );
-}
-
-export {
-  isoToMasked,
-  maskedToIso,
-  maskDate,
-  DayBoundInput
-};
-//# sourceMappingURL=chunk-JXTJI2YF.js.map

package/dist/chunk-K2E3UZUZ.js

@@ -1,108 +0,0 @@
-import {
-  fieldHeight
-} from "./chunk-2TZ6X265.js";
-import {
-  fieldRadiusPx
-} from "./chunk-GDN2LUTZ.js";
-import {
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/layout/ContentToolbar/ColumnsMenu.tsx
-import ColumnsIcon from "@mui/icons-material/ViewColumnRounded";
-import Box from "@mui/material/Box/index.js";
-import Checkbox from "@mui/material/Checkbox/index.js";
-import IconButton from "@mui/material/IconButton/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 { useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function ColumnRow({
-  option,
-  onToggle,
-  testId
-}) {
-  return /* @__PURE__ */ jsxs(
-    MenuItem,
-    {
-      "data-testid": testId,
-      onClick: () => onToggle(option.id, !option.visible),
-      disabled: option.locked,
-      sx: { gap: 1 },
-      children: [
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked: option.visible,
-            size: "small",
-            disableRipple: true,
-            sx: { p: 0, pointerEvents: "none" },
-            tabIndex: -1
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: option.label })
-      ]
-    }
-  );
-}
-function ColumnsMenu({
-  columns,
-  onToggle,
-  title = "Columns",
-  ariaLabel = "Toggle columns",
-  "data-testid": testId
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const close = () => setAnchorEl(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        size: "small",
-        "data-testid": testId,
-        "aria-label": ariaLabel,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        sx: {
-          width: fieldHeight,
-          height: fieldHeight,
-          borderRadius: fieldRadiusPx,
-          color: "text.secondary",
-          bgcolor: open ? "action.selected" : "transparent"
-        },
-        children: /* @__PURE__ */ jsx(ColumnsIcon, { sx: { fontSize: sxRem(16) } })
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Menu,
-      {
-        anchorEl,
-        open,
-        onClose: close,
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { minWidth: sxRem(200) } } },
-        children: [
-          /* @__PURE__ */ jsx(ListSubheader, { sx: { px: 1.5, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: "text.primary", lineHeight: 1.5 }, children: title }),
-          columns.map((option) => /* @__PURE__ */ jsx(
-            ColumnRow,
-            {
-              option,
-              onToggle,
-              testId: testId ? `${testId}-${option.id}` : void 0
-            },
-            option.id
-          ))
-        ]
-      }
-    )
-  ] });
-}
-
-export {
-  ColumnsMenu
-};
-//# sourceMappingURL=chunk-K2E3UZUZ.js.map

package/dist/chunk-K7FSTB2K.js

@@ -1,223 +0,0 @@
-import {
-  onTrackInk,
-  switchSx
-} from "./chunk-ZBVU2YWV.js";
-import {
-  LABEL_GAP_UNITS,
-  SWITCH_ICON_SIZES,
-  TAP_TARGET_MIN
-} from "./chunk-TNBJ4DK4.js";
-import {
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/form/Switch/Switch.parts.tsx
-import Box from "@mui/material/Box/index.js";
-import FormHelperText from "@mui/material/FormHelperText/index.js";
-import MuiSwitch from "@mui/material/Switch/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { styled, useTheme } from "@mui/material/styles/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var StyledSwitch = styled(MuiSwitch, {
-  shouldForwardProp: (prop) => ![
-    "customVariant",
-    "customColor",
-    "customSize",
-    "glow",
-    "glass",
-    "gradient",
-    "trackWidth",
-    "trackHeight",
-    "onText",
-    "offText",
-    "loading",
-    "ripple",
-    "pulse"
-  ].includes(prop)
-})(({ theme, ...flags }) => ({ ...switchSx(theme, flags) }));
-var StyledLabelContainer = styled(Box, {
-  shouldForwardProp: (prop) => !["labelPosition", "error"].includes(prop)
-})(({ theme, labelPosition, error }) => {
-  const stacked = labelPosition === "top" || labelPosition === "bottom";
-  return {
-    display: "flex",
-    alignItems: stacked ? "flex-start" : "center",
-    flexDirection: labelPosition === "top" ? "column" : labelPosition === "bottom" ? "column-reverse" : "row",
-    gap: theme.spacing(stacked ? LABEL_GAP_UNITS.stacked : LABEL_GAP_UNITS.beside),
-    width: "100%",
-    ...error && { "& .MuiTypography-root": { color: theme.palette.error.main } }
-  };
-});
-var LabelContainer = ({ labelPosition, error, children }) => /* @__PURE__ */ jsx(StyledLabelContainer, { labelPosition, error, children });
-var SwitchIcon = ({
-  icon,
-  shown,
-  animated,
-  size,
-  side,
-  onInk
-}) => {
-  const isOn = side === "on";
-  const translate = isOn ? "translate(-50%, -50%)" : "translate(50%, -50%)";
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: {
-        position: "absolute",
-        top: "50%",
-        ...isOn ? { left: shown ? sxRem(4) : "50%" } : { right: shown ? sxRem(4) : "50%" },
-        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-        opacity: shown ? 1 : 0,
-        transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,
-        pointerEvents: "none",
-        zIndex: 2,
-        color: isOn ? onInk : "text.secondary",
-        fontSize: sxRem(SWITCH_ICON_SIZES[size] ?? SWITCH_ICON_SIZES.md)
-      },
-      children: icon
-    }
-  );
-};
-var SwitchControl = ({
-  checked,
-  onChange,
-  onIcon,
-  offIcon,
-  animated,
-  size,
-  dataTestId,
-  switchRef,
-  inputId,
-  inputProps,
-  describedBy,
-  rest,
-  ...flags
-}) => {
-  const props = rest;
-  const theme = useTheme();
-  const onInk = onTrackInk(theme, flags);
-  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-flex" }, children: [
-    /* @__PURE__ */ jsx(
-      StyledSwitch,
-      {
-        ref: switchRef,
-        ...flags,
-        checked,
-        onChange,
-        disabled: Boolean(flags.loading) || props.disabled,
-        ...props,
-        inputProps: {
-          "aria-label": props["aria-label"],
-          "data-testid": dataTestId || "switch",
-          ...inputProps,
-          id: inputId,
-          "aria-describedby": describedBy
-        }
-      }
-    ),
-    onIcon && /* @__PURE__ */ jsx(
-      SwitchIcon,
-      {
-        icon: onIcon,
-        shown: Boolean(checked),
-        animated,
-        size,
-        side: "on",
-        onInk
-      }
-    ),
-    offIcon && /* @__PURE__ */ jsx(
-      SwitchIcon,
-      {
-        icon: offIcon,
-        shown: !checked,
-        animated,
-        size,
-        side: "off",
-        onInk
-      }
-    )
-  ] });
-};
-var SwitchHelper = ({ helperText, error, dataTestId, id }) => helperText ? /* @__PURE__ */ jsx(
-  FormHelperText,
-  {
-    id,
-    error,
-    sx: { mt: 1 },
-    "data-testid": dataTestId ? `${dataTestId}-helper` : "switch-helper",
-    children: helperText
-  }
-) : null;
-var SwitchLabel = ({ label, description, error, dataTestId, htmlFor, descriptionId, disabled }) => /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
-  /* @__PURE__ */ jsx(
-    Typography,
-    {
-      component: "label",
-      htmlFor,
-      variant: "body2",
-      fontWeight: 500,
-      color: error ? "error.main" : "text.primary",
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        // The floor applies to the row the label shares with the control. A
-        // description already makes the row taller than 40px, so forcing it
-        // there would only add blank space.
-        ...description ? {} : { minHeight: sxRem(TAP_TARGET_MIN) },
-        // A disabled control's label toggles nothing, so it must not wear the
-        // cursor that says it does.
-        ...htmlFor && !disabled ? { cursor: "pointer" } : {}
-      },
-      "data-testid": dataTestId ? `${dataTestId}-label` : "switch-label",
-      children: label
-    }
-  ),
-  description && /* @__PURE__ */ jsx(
-    Typography,
-    {
-      id: descriptionId,
-      variant: "caption",
-      color: error ? "error.main" : "text.secondary",
-      sx: { display: "block", mt: 0.5 },
-      children: description
-    }
-  )
-] });
-var SwitchRow = ({
-  label,
-  description,
-  labelPosition,
-  error,
-  dataTestId,
-  htmlFor,
-  descriptionId,
-  disabled,
-  control
-}) => {
-  if (!label) return /* @__PURE__ */ jsx(Fragment, { children: control });
-  return /* @__PURE__ */ jsxs(LabelContainer, { labelPosition, error, children: [
-    labelPosition === "start" && control,
-    /* @__PURE__ */ jsx(
-      SwitchLabel,
-      {
-        label,
-        description,
-        error,
-        dataTestId,
-        htmlFor,
-        descriptionId,
-        disabled
-      }
-    ),
-    labelPosition !== "start" && control
-  ] });
-};
-
-export {
-  SwitchIcon,
-  SwitchControl,
-  SwitchHelper,
-  SwitchRow
-};
-//# sourceMappingURL=chunk-K7FSTB2K.js.map

package/dist/chunk-KG64HV34.js

@@ -1,201 +0,0 @@
-import {
-  badgeVariantStyles
-} from "./chunk-M5ZXL52T.js";
-import {
-  bounceAnimation,
-  fadeInScaleAnimation,
-  glowPulseAnimation,
-  pulseAnimation,
-  shimmerAnimation
-} from "./chunk-3UIDKLML.js";
-import {
-  BADGE_BORDER_WIDTH,
-  BADGE_CONTENT_GAP,
-  BADGE_FONT_WEIGHT,
-  BADGE_LETTER_SPACING_EM,
-  BADGE_SIZES,
-  BADGE_TRANSITION_EASING,
-  BADGE_TRANSITION_MS,
-  BOUNCE,
-  FADE_IN_SCALE,
-  GLOW,
-  HOVER_SCALE,
-  PULSE,
-  SHIMMER,
-  badgeAnchor
-} from "./chunk-PYC4CWCQ.js";
-import {
-  accentFor
-} from "./chunk-3IPPMWUA.js";
-import {
-  sheen
-} from "./chunk-FQ6UW7IY.js";
-import {
-  rem,
-  rems
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/Badge/Badge.styles.ts
-import { alpha } from "@mui/material/styles/index.js";
-var getColorFromTheme = (theme, color) => {
-  const colorMap = {
-    primary: theme.palette.primary,
-    secondary: theme.palette.secondary,
-    success: theme.palette.success,
-    warning: theme.palette.warning,
-    info: theme.palette.info,
-    // `danger`, the house word the prop actually takes. Keyed on MUI's `error`
-    // it matched nothing and fell through to the default.
-    danger: theme.palette.error,
-    neutral: accentFor(theme, "neutral")
-  };
-  return colorMap[color] || theme.palette.primary;
-};
-var getSizeStyles = (theme, size) => {
-  const step = BADGE_SIZES[size] || BADGE_SIZES.md;
-  return {
-    minWidth: rem(theme, step.minWidth),
-    height: rem(theme, step.height),
-    /** Half the height: the pill's end caps. */
-    pillRadius: rem(theme, step.height / 2),
-    step,
-    padding: rems(theme, 0, step.paddingHorizontal),
-    dotSize: rem(theme, step.dotSize)
-  };
-};
-var getAnchorOrigin = (position) => badgeAnchor(position || "top-right");
-var rgbValuesOf = (color) => {
-  if (color.startsWith("#")) {
-    const hex = color.slice(1);
-    const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
-    return `${r}, ${g}, ${b}`;
-  }
-  const match = color.match(/\d+/g);
-  if (match) return `${match[0]}, ${match[1]}, ${match[2]}`;
-  return "255, 255, 255";
-};
-var badgeLightingStyles = ({
-  glow,
-  pulse,
-  colorPalette,
-  theme
-}) => ({
-  // Glow effect
-  ...glow && !pulse && {
-    boxShadow: `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`,
-    filter: `brightness(${GLOW.brightness})`,
-    "&:hover": {
-      boxShadow: `0 0 ${rems(theme, GLOW.hoverBlur, GLOW.hoverSpread)} ${alpha(colorPalette.main, GLOW.hoverAlpha)}`
-    }
-  },
-  // Pulse animation
-  ...pulse && !glow && {
-    animation: `${pulseAnimation} ${PULSE.durationMs / 1e3}s ease-in-out infinite`
-  },
-  // Both glow and pulse
-  ...glow && pulse && {
-    animation: `${glowPulseAnimation(theme)} ${PULSE.durationMs / 1e3}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1e3}s ease-in-out infinite`,
-    filter: `brightness(${GLOW.brightness})`
-  }
-});
-var badgeAnimationStyles = ({
-  animate,
-  bounce,
-  shimmer,
-  glow: _glow,
-  pulse: _pulse,
-  customVariant,
-  colorPalette,
-  theme
-}) => ({
-  ...animate && !bounce && {
-    animation: `${fadeInScaleAnimation} ${FADE_IN_SCALE.durationMs / 1e3}s cubic-bezier(0.68, -0.55, 0.265, 1.55)`
-  },
-  // Bounce animation
-  ...bounce && {
-    animation: `${bounceAnimation(theme)} ${BOUNCE.durationMs / 1e3}s ease-in-out`
-  },
-  // Shimmer effect
-  ...shimmer && {
-    background: customVariant === "gradient" ? `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)` : colorPalette.main,
-    backgroundSize: shimmer ? `${rem(theme, 1e3)} 100%` : "auto",
-    position: "relative",
-    overflow: "hidden",
-    "&::after": {
-      content: '""',
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      background: `linear-gradient(
-            90deg,
-            transparent,
-            ${sheen(theme, SHIMMER.alpha)},
-            transparent
-          )`,
-      animation: `${shimmerAnimation(theme)} ${SHIMMER.durationMs / 1e3}s infinite`
-    }
-  }
-});
-var badgeStyles = ({
-  theme,
-  customVariant,
-  customSize = "md",
-  customColor = "primary",
-  glow,
-  pulse,
-  animate,
-  shimmer,
-  bounce,
-  hasIcon
-}) => {
-  const colorPalette = getColorFromTheme(theme, customColor);
-  const sizeStyles = getSizeStyles(theme, customSize);
-  return {
-    "--glow-color": rgbValuesOf(colorPalette.main),
-    "& .MuiBadge-badge": {
-      transition: `all ${BADGE_TRANSITION_MS / 1e3}s ${BADGE_TRANSITION_EASING}`,
-      fontWeight: BADGE_FONT_WEIGHT,
-      border: `${rem(theme, BADGE_BORDER_WIDTH)} solid ${theme.palette.background.paper}`,
-      letterSpacing: `${BADGE_LETTER_SPACING_EM}em`,
-      textTransform: customVariant === "gradient" || customVariant === "glass" ? "uppercase" : "none",
-      willChange: "transform, opacity",
-      backfaceVisibility: "hidden",
-      // Outline variant
-      // Destructive variant
-      // Warning variant
-      // Adjust padding when icon is present
-      ...badgeVariantStyles(theme, colorPalette, sizeStyles, customVariant),
-      ...hasIcon && {
-        paddingLeft: sizeStyles.padding.split(" ")[1],
-        display: "inline-flex",
-        alignItems: "center",
-        gap: rem(theme, BADGE_CONTENT_GAP)
-      },
-      // Animation on mount
-      ...badgeAnimationStyles({
-        animate,
-        bounce,
-        shimmer,
-        glow,
-        pulse,
-        customVariant,
-        colorPalette,
-        theme
-      }),
-      ...badgeLightingStyles({ glow, pulse, colorPalette, theme }),
-      "&:not(.MuiBadge-dot):hover": {
-        transform: `scale(${HOVER_SCALE})`,
-        zIndex: 1
-      }
-    }
-  };
-};
-
-export {
-  getSizeStyles,
-  getAnchorOrigin,
-  badgeStyles
-};
-//# sourceMappingURL=chunk-KG64HV34.js.map