@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-AD776JPA.js

@@ -0,0 +1,117 @@
+import {
+  LabelContainer,
+  SwitchControl,
+  SwitchHelper,
+  SwitchLabel
+} from "./chunk-N5IVVLTH.js";
+import {
+  splitTestId
+} from "./chunk-6F5IKY32.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Switch/Switch.tsx
+import Box from "@mui/material/Box/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  glow: false,
+  glass: false,
+  gradient: false,
+  labelPosition: "end",
+  error: false,
+  animated: true,
+  loading: false,
+  ripple: false,
+  pulse: false
+};
+var Switch = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    label,
+    description,
+    glow,
+    glass,
+    gradient,
+    labelPosition,
+    onIcon,
+    offIcon,
+    onText,
+    offText,
+    error,
+    helperText,
+    trackWidth,
+    trackHeight,
+    checked,
+    onChange,
+    animated,
+    loading,
+    ripple,
+    pulse,
+    ...others
+  } = withDefaults(props, DEFAULTS);
+  const { testId: dataTestId, rest } = splitTestId(others);
+  const containerTestId = dataTestId ? `${dataTestId}-container` : "switch-container";
+  const control = /* @__PURE__ */ jsx(
+    SwitchControl,
+    {
+      customVariant: variant,
+      customColor: color,
+      customSize: size,
+      glow,
+      glass,
+      gradient,
+      trackWidth,
+      trackHeight,
+      onText,
+      offText,
+      loading,
+      ripple,
+      pulse,
+      checked,
+      onChange,
+      onIcon,
+      offIcon,
+      animated,
+      size,
+      dataTestId,
+      switchRef: ref,
+      rest
+    }
+  );
+  const helper = /* @__PURE__ */ jsx(SwitchHelper, { helperText, error, dataTestId });
+  if (!label) {
+    return /* @__PURE__ */ jsxs(Box, { "data-testid": containerTestId, children: [
+      control,
+      helper
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": containerTestId, children: [
+    /* @__PURE__ */ jsxs(LabelContainer, { labelPosition, error, children: [
+      labelPosition === "start" && control,
+      /* @__PURE__ */ jsx(
+        SwitchLabel,
+        {
+          label,
+          description,
+          error,
+          dataTestId
+        }
+      ),
+      labelPosition !== "start" && control
+    ] }),
+    helper
+  ] });
+});
+Switch.displayName = "Switch";
+
+export {
+  Switch
+};
+//# sourceMappingURL=chunk-AD776JPA.js.map

package/dist/chunk-AD776JPA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport React, { forwardRef } from 'react';\n\nimport { splitTestId } from '../../../platform/test-id';\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport {\n  LabelContainer,\n  SwitchControl,\n  SwitchHelper,\n  SwitchLabel,\n} from './Switch.parts';\nimport type { SwitchProps } from './Switch.types';\n\nconst DEFAULTS = {\n  variant: 'default',\n  color: 'primary',\n  size: 'md',\n  glow: false,\n  glass: false,\n  gradient: false,\n  labelPosition: 'end',\n  error: false,\n  animated: true,\n  loading: false,\n  ripple: false,\n  pulse: false,\n} satisfies Partial<SwitchProps>;\n\ntype ResolvedProps = SwitchProps & Required<Pick<SwitchProps, keyof typeof DEFAULTS>>;\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {\n  const {\n    variant, color, size, label, description, glow, glass, gradient, labelPosition,\n    onIcon, offIcon, onText, offText, error, helperText, trackWidth, trackHeight,\n    checked, onChange, animated, loading, ripple, pulse,\n    ...others\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const { testId: dataTestId, rest } = splitTestId(others);\n  const containerTestId = dataTestId ? `${dataTestId}-container` : 'switch-container';\n\n  const control = (\n    <SwitchControl\n      customVariant={variant}\n      customColor={color}\n      customSize={size}\n      glow={glow}\n      glass={glass}\n      gradient={gradient}\n      trackWidth={trackWidth}\n      trackHeight={trackHeight}\n      onText={onText}\n      offText={offText}\n      loading={loading}\n      ripple={ripple}\n      pulse={pulse}\n      checked={checked}\n      onChange={onChange}\n      onIcon={onIcon}\n      offIcon={offIcon}\n      animated={animated}\n      size={size}\n      dataTestId={dataTestId}\n      switchRef={ref}\n      rest={rest}\n    />\n  );\n\n  const helper = <SwitchHelper helperText={helperText} error={error} dataTestId={dataTestId} />;\n\n  if (!label) {\n    return (\n      <Box data-testid={containerTestId}>\n        {control}\n        {helper}\n      </Box>\n    );\n  }\n\n  return (\n    <Box data-testid={containerTestId}>\n      <LabelContainer labelPosition={labelPosition} error={error}>\n        {labelPosition === 'start' && control}\n\n        <SwitchLabel\n          label={label}\n          description={description}\n          error={error}\n          dataTestId={dataTestId}\n        />\n\n        {labelPosition !== 'start' && control}\n      </LabelContainer>\n\n      {helper}\n    </Box>\n  );\n});\n\nSwitch.displayName = 'Switch';\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAgB,kBAAkB;AA0C9B,cA8BE,YA9BF;AA7BJ,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,eAAe;AAAA,EACf,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AACT;AAIO,IAAM,SAAS,WAA2C,CAAC,OAAO,QAAQ;AAC/E,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAa;AAAA,IAAM;AAAA,IAAO;AAAA,IAAU;AAAA,IACjE;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAY;AAAA,IAAY;AAAA,IACjE;AAAA,IAAS;AAAA,IAAU;AAAA,IAAU;AAAA,IAAS;AAAA,IAAQ;AAAA,IAC9C,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,EAAE,QAAQ,YAAY,KAAK,IAAI,YAAY,MAAM;AACvD,QAAM,kBAAkB,aAAa,GAAG,UAAU,eAAe;AAEjE,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC,eAAe;AAAA,MACf,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA;AAAA,EACF;AAGF,QAAM,SAAS,oBAAC,gBAAa,YAAwB,OAAc,YAAwB;AAE3F,MAAI,CAAC,OAAO;AACV,WACE,qBAAC,OAAI,eAAa,iBACf;AAAA;AAAA,MACA;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAI,eAAa,iBAChB;AAAA,yBAAC,kBAAe,eAA8B,OAC3C;AAAA,wBAAkB,WAAW;AAAA,MAE9B;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEC,kBAAkB,WAAW;AAAA,OAChC;AAAA,IAEC;AAAA,KACH;AAEJ,CAAC;AAED,OAAO,cAAc;","names":[]}

package/dist/chunk-AGYGNNOM.js

@@ -0,0 +1,56 @@
+import {
+  useMapClick,
+  useMapControls,
+  useMapPointer,
+  useMapSearch,
+  useMapView
+} from "./chunk-4ETQRBZC.js";
+
+// src/components/data-display/MapPreview/useMapPreview.ts
+import { useMemo, useRef } from "react";
+var useMapPreview = (props) => {
+  const { center, coordinates: legacyCoordinates, interactive, onMarkerDrag, onMapClick } = props;
+  const coordinates = useMemo(
+    () => center || legacyCoordinates || { lat: 0, lng: 0 },
+    [center, legacyCoordinates]
+  );
+  const containerRef = useRef(null);
+  const view = useMapView({
+    coordinates,
+    initialZoom: props.zoom,
+    initialMapType: props.mapType
+  });
+  const controls = useMapControls({
+    coordinates,
+    zoom: view.zoom,
+    mapType: view.mapType,
+    zoomTo: view.zoomTo,
+    setMapType: view.setMapType,
+    setMarkerPosition: view.setMarkerPosition,
+    setPanOffset: view.setPanOffset,
+    containerRef
+  });
+  const pointer = useMapPointer({
+    interactive,
+    markerPosition: view.markerPosition,
+    panOffset: view.panOffset,
+    onMarkerDrag,
+    setMarkerPosition: view.setMarkerPosition,
+    setPanOffset: view.setPanOffset
+  });
+  const search = useMapSearch({ zoomTo: view.zoomTo, setMarkerPosition: view.setMarkerPosition });
+  const handleMapClick = useMapClick({
+    coordinates,
+    interactive,
+    isPanning: pointer.isPanning,
+    onMapClick,
+    onMarkerDrag,
+    setMarkerPosition: view.setMarkerPosition
+  });
+  return { containerRef, view, controls, pointer, search, handleMapClick };
+};
+
+export {
+  useMapPreview
+};
+//# sourceMappingURL=chunk-AGYGNNOM.js.map

package/dist/chunk-AJ6XEO4E.js

@@ -0,0 +1,80 @@
+import {
+  METRICS,
+  footerSx
+} from "./chunk-TFO6GBW7.js";
+
+// src/components/form/CategorySelect/CategoryPanelFoot.tsx
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonSx = (sheet) => ({
+  height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
+  padding: "0 13px",
+  borderRadius: "8px",
+  fontSize: 12.5,
+  fontWeight: 600,
+  textTransform: "none",
+  minWidth: 0
+});
+function CategoryMultiFoot({
+  count,
+  changed,
+  sheet,
+  onClear,
+  onApply,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: footerSx, "data-testid": `${dataTestId}-footer`, children: [
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 12, color: "text.secondary" }, children: copy.footer.selectedCount(count) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          disabled: count === 0,
+          sx: buttonSx(sheet),
+          onClick: onClear,
+          "data-testid": `${dataTestId}-clear`,
+          children: copy.footer.clear
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          sx: buttonSx(sheet),
+          onClick: onApply,
+          "data-testid": `${dataTestId}-apply`,
+          children: changed ? copy.footer.apply : copy.footer.close
+        }
+      )
+    ] })
+  ] });
+}
+function CategorySingleFoot({
+  sheet,
+  onCancel,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: footerSx, "data-testid": `${dataTestId}-footer`, children: [
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 12, color: "text.secondary" }, children: copy.footer.singleHint }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        sx: buttonSx(sheet),
+        onClick: onCancel,
+        "data-testid": `${dataTestId}-cancel`,
+        children: copy.footer.cancel
+      }
+    )
+  ] });
+}
+
+export {
+  CategoryMultiFoot,
+  CategorySingleFoot
+};
+//# sourceMappingURL=chunk-AJ6XEO4E.js.map

package/dist/chunk-B3BK2SNS.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Input
+} from "./chunk-TLX66HCW.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-IPPTOL53.js";
+
+// src/components/form/total-form/Fields/TextField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextField({ name, label, type = "text", placeholder }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: name,
+        name,
+        type,
+        placeholder,
+        value: values[name] ?? "",
+        error: Boolean(error),
+        "data-testid": testId,
+        onChange: (event) => setFieldValue(name, event.target.value)
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  TextField
+};
+//# sourceMappingURL=chunk-B3BK2SNS.js.map

package/dist/chunk-B5PYBEXO.js

@@ -0,0 +1,46 @@
+import {
+  SPACER_FLEX_GROW,
+  SPACER_FLEX_SHRINK,
+  spacerDimensions
+} from "./chunk-N7MJ6CNC.js";
+import {
+  resolveTestId
+} from "./chunk-6F5IKY32.js";
+
+// src/components/layout/Spacer/Spacer.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var Spacer = ({
+  size,
+  direction,
+  width,
+  height,
+  flex = false,
+  className,
+  ...testIdProps
+}) => {
+  const theme = useTheme();
+  const dimensions = spacerDimensions({ size, direction, width, height }, (units) => theme.spacing(units));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": resolveTestId(testIdProps),
+      sx: {
+        width: dimensions.width,
+        height: dimensions.height,
+        flex: flex ? SPACER_FLEX_GROW : void 0,
+        flexShrink: SPACER_FLEX_SHRINK,
+        pointerEvents: "none",
+        userSelect: "none"
+      },
+      "aria-hidden": "true"
+    }
+  );
+};
+
+export {
+  Spacer
+};
+//# sourceMappingURL=chunk-B5PYBEXO.js.map

package/dist/chunk-BBC4KT5G.js

@@ -0,0 +1,231 @@
+import {
+  CustomTabPanel
+} from "./chunk-7UZ2TFIK.js";
+import {
+  tabsRootStyles
+} from "./chunk-EWSGWLHN.js";
+
+// src/components/navigation/Tabs/Tabs.tsx
+import Close from "@mui/icons-material/Close";
+import Badge from "@mui/material/Badge/index.js";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import MuiTab from "@mui/material/Tab/index.js";
+import MuiTabs from "@mui/material/Tabs/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledTabs = styled(MuiTabs, {
+  shouldForwardProp: (prop) => !["customVariant", "size", "showDividers"].includes(prop)
+})(
+  ({ theme, customVariant, size, showDividers }) => ({
+    ...tabsRootStyles({ theme, customVariant, size, showDividers })
+  })
+);
+var CloseButton = styled(Box)(({ theme }) => ({
+  marginLeft: theme.spacing(0.5),
+  padding: theme.spacing(0.25),
+  width: 20,
+  height: 20,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  borderRadius: "50%",
+  color: theme.palette.action.active,
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.error.main, 0.1),
+    color: theme.palette.error.main
+  }
+}));
+var BadgeWrapper = styled(Badge)(() => ({
+  "& .MuiBadge-badge": {
+    right: -6,
+    top: 4,
+    fontSize: "0.75rem",
+    minWidth: 16,
+    height: 16,
+    padding: 0
+  }
+}));
+var TABS_DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "primary",
+  fullWidth: false,
+  orientation: "horizontal",
+  showDividers: false,
+  centered: false,
+  scrollable: false,
+  scrollButtons: "auto",
+  sticky: false,
+  stickyOffset: 0,
+  animateContent: false,
+  animationDuration: 300,
+  persistContent: false,
+  disabled: false,
+  loading: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveScrollButtons = (scrollable) => scrollable ? "auto" : false;
+var buildTabsSx = ({
+  fullWidth,
+  sticky,
+  stickyOffset,
+  indicatorColor,
+  disabled
+}) => ({
+  ...fullWidth && { width: "100%" },
+  // Pin the tab list while panels scroll beneath it. Opaque background + bottom
+  // divider so scrolled content does not show through.
+  ...sticky && {
+    position: "sticky",
+    top: stickyOffset,
+    zIndex: 2,
+    backgroundColor: "background.default",
+    borderBottom: 1,
+    borderColor: "divider"
+  },
+  ...indicatorColor && {
+    "& .MuiTabs-indicator": { backgroundColor: indicatorColor }
+  },
+  ...disabled && { opacity: 0.6, pointerEvents: "none" }
+});
+var TabLabel = ({ item, closeTabLabel, onClose }) => {
+  const content = /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    item.icon,
+    /* @__PURE__ */ jsx("span", { children: item.label }),
+    item.closable && /* @__PURE__ */ jsx(
+      CloseButton,
+      {
+        onClick: (e) => onClose(e, item.id),
+        role: "button",
+        tabIndex: 0,
+        "aria-label": closeTabLabel,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          onClose(e, item.id);
+        },
+        children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
+      }
+    )
+  ] });
+  if (item.badge === void 0) return content;
+  return /* @__PURE__ */ jsx(BadgeWrapper, { badgeContent: item.badge, color: "error", children: content });
+};
+var TabsBar = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => /* @__PURE__ */ jsx(
+  StyledTabs,
+  {
+    ...rest,
+    value,
+    onChange,
+    customVariant: p.variant,
+    size: p.size,
+    showDividers: p.showDividers,
+    orientation: p.orientation,
+    centered: p.centered,
+    variant: p.scrollable ? "scrollable" : "standard",
+    "data-testid": dataTestId ? `${dataTestId}-list` : "tabs-list",
+    scrollButtons: resolveScrollButtons(p.scrollable),
+    allowScrollButtonsMobile: p.scrollable,
+    textColor: p.color,
+    indicatorColor: p.color,
+    sx: buildTabsSx({
+      fullWidth: p.fullWidth,
+      sticky: p.sticky,
+      stickyOffset: p.stickyOffset,
+      indicatorColor: p.indicatorColor,
+      disabled: p.disabled
+    }),
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      MuiTab,
+      {
+        value: item.id,
+        label: /* @__PURE__ */ jsx(TabLabel, { closeTabLabel: p.closeTabLabel, item, onClose: onCloseTab }),
+        disabled: item.disabled || p.disabled,
+        className: item.className,
+        id: `tab-${item.id}`,
+        "aria-controls": `tabpanel-${item.id}`,
+        "aria-disabled": item.disabled || p.disabled,
+        "data-testid": dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`
+      },
+      item.id
+    ))
+  }
+);
+var TabsPanels = ({
+  items,
+  value,
+  variant,
+  animateContent,
+  animationDuration,
+  persistContent,
+  loading,
+  loadingComponent,
+  tabPanelProps,
+  dataTestId
+}) => /* @__PURE__ */ jsx(Box, { sx: { mt: variant === "enclosed" ? 0 : 2 }, children: items.map((item, index) => /* @__PURE__ */ jsx(
+  CustomTabPanel,
+  {
+    id: item.id,
+    value,
+    animate: animateContent,
+    animationDuration,
+    persist: persistContent,
+    loading,
+    loadingComponent,
+    className: tabPanelProps?.className,
+    dataTestId,
+    index,
+    children: item.content
+  },
+  item.id
+)) });
+var Tabs = React.forwardRef(
+  (tabsProps, ref) => {
+    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) };
+    const {
+      // Destructured only to keep it OUT of `rest`, which is spread onto the
+      // DOM node — `{...resolved}` below is what actually carries it to
+      // `TabsBar`. Same reason as `value` on the next line.
+      closeTabLabel: _closeTabLabel,
+      value: _value,
+      onChange,
+      onTabClose,
+      className,
+      disabled,
+      showDividers,
+      variant,
+      dataTestId,
+      ...rest
+    } = resolved;
+    const handleChange = (event, newValue) => {
+      if (!disabled) onChange(event, newValue);
+    };
+    const handleTabClose = (event, tabId) => {
+      event.stopPropagation();
+      onTabClose?.(tabId);
+    };
+    return /* @__PURE__ */ jsxs(Box, { className, ref, "data-testid": dataTestId || "tabs", children: [
+      /* @__PURE__ */ jsx(
+        TabsBar,
+        {
+          ...resolved,
+          rest,
+          onChange: handleChange,
+          onCloseTab: handleTabClose
+        }
+      ),
+      showDividers && variant !== "enclosed" && /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(TabsPanels, { ...resolved })
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
+
+export {
+  Tabs
+};
+//# sourceMappingURL=chunk-BBC4KT5G.js.map